[CSS3,animation]CSS3のanimationで何ができるか試してみた！使わないと思うけどw

やっぱり動きがあると面白いですよね！動かさないけど。
どうも久々更新の下山です。って書くと複数人で更新してるみたでかっこいい。

さて、とうとうアニメーションに手を出し始めました。
今回はCSS3で登場のanimationプロパティってどんなことが出来るの？ってことでまとめてみるよ！

animationプロパティ

animationショートハンドも使用可能です。

あと1つ重要なのが「@keyframes」です。
animetaion-nameで指定して通過点をそれぞれ指定します。

グダグダ説明しても仕方ないのでやってみましょう。

<a href="#">btn</a>

上記のようなリンクがあります。
これをCSSでボタン風にしていきます。

a {
  display:block;
  color:#fff;
  width:150px;
  padding:1em;
  text-align:center;
  background:#666;
  text-decoration:none;
}

ボタンみたいになりましたね。
これを「:hover」を使って動きを付けます。

a:hover {
  background:#c00;
  width:250px;
}

色を赤にして幅を250pxにしてねーです。

See the Pen ZGegrj by mitsuki sagayama (@sagayama) on CodePen.

しかしこれだけじゃアニメーションはしませんよね。 ここでanimationプロパティの登場。

• 名前は「btn」
• アニメーション1回にかける時間は2秒
• 速度変更はease-out
• 繰り返す回数は無限
• 繰り返し方は行ったり来たり
• 待ち時間0秒

a {
  display:block;
  color:#fff;
  width:150px;
  padding:1em;
  text-align:center;
  background:#666;
  text-decoration:none;
}
a:hover {
  background:#c00;
  width:250px;
  animation-name:btn;
  animation-duration:2s;
  animation-timing-function:ease-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-delay:0s;
}

長くなりましたけど、こうなります。
ショートハンドで書きたい場合は「animation:btn 2s ease-out 1 0s;」となります。

実はこれでもアニメーションは実現しません。
@keyframesで「a」の状態から「a:hover」の状態へどう通過していくか指定します。

@keyframes btn {
  0% {background:#666; width:150px;}
  100% {background:#c00; width:250px;}
}

btnって名前のヤツを0%のときは背景グレー、幅150pxで100%のときは背景赤で幅250pxにしろや。って感じです。

See the Pen MwpNMz by mitsuki sagayama (@sagayama) on CodePen.

まとめ

面白いですね！こんなボタン誰が使うんでしょうね！
でも面白いから色々やっては書いてみたいと思います。

今回はじめてCODEPEN使ってみたんですけど・・・。ねっ！