TIPS

@keyframesとは

@keyframesとは、CSSアニメーションの中でキーフレームと呼ばれる任意のポイントで
スタイルを指定することにより、複雑なアニメーションが可能になります。
具体的にどんなことができるのかは、後ほど実例とともに見ていきましょう。

対応ブラウザ

• IE(10〜)
• Firefox
• Opera
• Chrome
• Safari
-webkit-や-moz-、-ms-などのベンダープレフィックスは忘れずにつけておきましょう。

プロパティ一覧

◯ animation-name
アニメーションを定義する名前を指定します。

ー 例 ー

◯ animation-duration
一回のアニメーションにかかる時間を指定します。

ー 例 ー

◯ animation-timing-function
アニメーションするときの変化の方法を指定します。

ー 例 ー

◯ animation-delay
アニメーションが始まるまでの遅延時間を指定します。

ー 例 ー

◯ animation-iteration-count
アニメーションを行う回数を数値で指定します。

infinite
アニメーションを無限に繰り返します。

number（数字）
アニメーションを繰り返す回数。

ー 例 ー

◯ animation-direction
アニメーションを反転させて再生するかどうかを指定します。

normal
毎回、通常方向のアニメーションを行います。

reverse
毎回、逆方向のアニメーションを行います。

alternate
通常再生と逆再生を交互に行います。

alternate-reverse
逆再生と通常再生を交互に行います。

ー 例 ー

◯ animation-play-state
アニメーションを一時停止、または再開することができます。

running
アニメーションを実行中。

paused
アニメーションを一時停止。

ー 例 ー

◯ animation-fill-mode
アニメーションを実行する前後に、スタイルを適用するかどうかを指定します。

none
アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されません。
forwards
アニメーションの最後に適用されているスタイルの状態を維持します。

backwards
アニメーションの最初に適用されているスタイルの状態を維持します。

both
forwards と backwards の両方が指定されます。スタイルはアニメーションの実行前と実行後の両方が適用されます。

ー 例 ー

◯ ショートハンドでまとめて指定する場合は以下のような内容で書きます。
animation: name duration timing-function delay iteration-count direction fill-mode