解 説

トランジションアニメーションはプロパティの値を疑似クラスなどで変化させることがトリガーになって開始されます。ところが、ページが開いたら自動でアニメーションをさせたい場合などはトランジションアニメーションが使えません。このような場合、キーフレームアニメーションなら自動でアニメーションを実現することができます。

キーフレームの仕組み

簡単なアニメーションの動きにもアニメーションの開始と終了があります。この開始と終了のポイントがキーフレームになります。
また、少し複雑な動きをするアニメーションの場合には開始と終了だけのキーフレームだけではなく途中のポイントにもキーフレームが存在することになります。
まずこのキーフレームの作成方法を覚えましょう。

キーフレームの作成方法

キーフレームの作成方法は@keyframeという@ルールを使用します。

アットルール(@規則)は、セレクタとプロパティだけでは指定できない機能を補うために用意されたもので、@キーワードとそれに続く部分から成ります。

@keyframe キーフレームの名前 {
 キーフレームの位置  {プロパティ:値}
}

@keyframeにはWebKitブラウザには接頭語が必要です。(safariで接頭語が必要2015/8/30現在)
@-webkit-keyframe
とする必要があります。

キーフレームの中に記述するセレクタはキーフレームの位置になります。通常ここのセレクタはパーセントで指定します。キーワードのtoとfromもセレクタとして使用できます。「from」が0パーセント、 「to」 が100パーセントです。

キーフレームの例

例えば次の例では、「rect」というキーフレームを定義しています。0パーセントの時に背景色は赤で50パーセントで青になり、100%の時に銀色になるキーフレームです。

animation-nameなどのプロパティ設定

キーフレームが定義できたらanimation-nameプロパティを記述します。
animation-nameプロパティの値は@keyframeで指定した名前になります。その他のプロパティはトランジションと同様に指定します。

キーフレームアニメーションの作成例

キーフレームアニメーションのサンプル
CSSのコード

HTMLコード

animation-name
animation-nameは@keyframesで定義した名前を使います。noneを指定するとアニメーションしません。
animation-duration
変化する時間を指定します。秒単位(s)で指定します。(小数可) 初期値は0s
animation-timing-function
イージングの設定です。 ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワードで指定するか、cubic-bezier(数値, 数値, 数値, 数値)で指定します。
animation-delay
スタイルの変化を開始するまでの時間を指定します。初期値は0s
animation-iteration-count
アニメーションの繰り返し回数はanimation-iteration-countで指定します。初期値は1です。
値をinfiniteとすると繰り返しアニメーションを行います。
animation-direction
アニメーションの再生を逆にすることができます。また順方向と逆方向を交互に繰り返すこともできます。順方向はnormalでデフォルト値です。alternateはアニメーションが終了すると逆方向にアニメーションを行います。
animation-fill-mode
infinite以外で繰り返しを行う場合、つまり必ずアニメーションが終了する条件の場合の、最初の表示と最後の表示の設定ができます。値は「backwards」と「forwards」、そして「both」があります。「backwards」は「0%」 または 「from」 キーフレームで定義された値をアニメーション開始前に適用します。「forwards」は最後のキーフレームで指定値された値を維持し、「both」は「forwards」 と 「backwards」 の両方に従います。

サンプル
animation-play-state
runningかpausedのキーワードを使用して疑似クラスを使用するなどしてアニメーションを止めたりスタートしたりすることができます。

サンプル