[CSS] animationの各プロパティと@keyframesの動作一覧

みんさんご存知の通り、CSSではJavaScriptを使わなくても要素(文字や画像)に対してアニメーションをつけることができます。

アニメーションをつけるために必要なのは、animationプロパティと@keyframesです。

今回はその2つがどのように動くのかをまとめていこうと思います。

[スポンサーリンク]

animationと@keyframesでできること

改めてですが、animationと@keyframesでできることはこのように要素(サンプルはSVG)に対して動きをつけることができます。

こんな感じでハートが鼓動をうっているようなアニメーションが作れます。

See the Pen CSS-animate-heart by morinkey (@morinkey) on CodePen.

animationがやっていること

animationは基本的にアニメーションの動くスピードや反復を定義しています。

たとえば、上記のCSSでみると、これは1回のアニメーションのスピードです。

animation-duration: 1s;

そしてこちらは反復をあらわしています。

animation-iteration-count: infinite;

具体的にどのように動かすかについては、このように@keyframesで定義しています。
@keyframesで定義したものをanimation-nameで使用するようなイメージになります。

animation-name: svgEffect;

@keyframes svgEffect {
  .
  .
  .
}

それでは次以降で@keyframesの使い方についてみていきましょう。

@keyframesでできること

さて、上記でどのように動かすのかを@keyframesで定義しているとお伝えしましたが、具体的にはこのように定義していきます。

@keyframes svgEffect {
  0% {
    アニメーション開始時のプロパティ
  }
  100% {
    アニメーション終了時のプロパティ
  }
}

0%が開始で、100%がアニメーション終了時のプロパティ値となります。

たとえば、アニメーション時間が1秒だとすると、その1秒間の間に0%から100%のプロパティへと推移していきます。

アニメーションをもっと小刻みにしたい場合は、間に50%や20%・30%・・・幅を狭くしてプロパティ値を指定することも可能です。

animationのプロパティ

それではこれ以降では、animationのプロパティをまとめていこうと思います。

アニメーションが単調な規則ではなく、さまざまな規則で動かすためのプロパティがanimationには用意されているのでそれをまとめていきます。

animation-fill-mode

それではまずは、animation-fill-modeから見ていきましょう。

アニメーション開始時と終了時のスタイルを適用するプロパティです。

値は、none , forwards , backwards , bothの4つがあります。

そしてこのプロパティが一番文章だけでは伝わりにくいやつです。。実際に動かしながらそれぞれの値を見ていきましょう。

今から動かしていくサンプルコードでは、こちらの3種類の星がアニメーションによって少しずつ変化していきます。

まずこちらがアニメーションが動くまえの初期状態の星です。

そしてこちらが@keyframesの0%の星です。
アニメーションの開始時の星ですね。

そして最後にこちらが@keyframesの100%の星です。
アニメーション終了時の星です。

これらの星を使って、none , forwards , backwards , bothがどのように動くのかを見ていきましょう。

まずは、値がanimation-fill-mode: noneの動きを見ていきましょう。
こちらのCodePenを実行して2秒後にアニメーションが動くようになっています。

See the Pen css-animation-fill-mode-none by morinkey (@morinkey) on CodePen.

わかりましたか?
ちょっと速すぎてわかりにくいかもしれませんね。。

noneを指定すると、アニメーション開始前と後は、デフォルトの値が適用されます。
こちらのサンプルでは、初期値の緑色の星へと変化していっていますね。

では続いて、値がanimation-fill-mode: forwardsの動きを見ていきましょう。
こちらではアニメーション開始時にデフォルトが適用され、アニメーション終了時に@keyframesの100%の値が設定されます。

See the Pen css-animation-fill-mode-forwards by morinkey (@morinkey) on CodePen.

では続いて、値がanimation-fill-mode: backwardsの動きを見ていきましょう。
こちらではアニメーション開始時に@keyframesの0%が適用され、アニメーション終了時にデフォルトの値が設定されます。

See the Pen css-animation-fill-mode-backwards by morinkey (@morinkey) on CodePen.

では最後に、値がanimation-fill-mode: bothの動きを見ていきましょう。
おそらくこの値が一般的によく使われているようにも思います。
こちらではアニメーション開始時に@keyframesの0%が適用され、アニメーション終了時に@keyframesの100%の値が設定されます。
開始前でも終了後でも@keyframesの値を使っているということですね。

See the Pen css-animation-fill-mode-both by morinkey (@morinkey) on CodePen.

animation-iteration-count

アニメーションの再生回数を定義できます。

infiniteで無制限。

数値をいれれば、その指定した回数分アニメーションが動きます。

animation-duration

アニメーション一回分の長さを指定します。

1sと指定したら、アニメーション1回あたりの実行時間は1秒となります。

animation-direction

これはアニメーションを0%->100%と100%->0%を交互に実行するプロパティです。

このようにハートが鼓動しているようなアニメーションが作れます。

See the Pen CSS-animate-heart by morinkey (@morinkey) on CodePen.

animation-timing-function

animation-timing-functionは、アニメーションの実行する速度を変更するためのプロパティです。

こちらのサイトにあるような速度に変化をつけることができます。

速度はこのようにして変更していきます。(数値の代わりにease/linearのような固定値を入れることもできます。)

  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);

先程のハートを鼓動させるアニメーションへanimation-timing-functionを追加して動きを少しかえてみました。
ドクンドクンとした鼓動が少し不規則な動きになっています。

See the Pen CSS-animate-heart-timing-function by morinkey (@morinkey) on CodePen.

さいごに

CSSのアニメーションは仕組みさえおさえておけば、あとは色々と自分好みにカスタマイズするのはとても簡単だと思います。

CodePenにはすごくキレイなCSSアニメーションが溢れています。どんなアニメーションをつくろうかと迷ったらぜひ見てみてください。

それでは!