こんにちは、ジーニアスウェブの平です。
最近、アニメーションについて学ぶ機会があったのですが、アニメーションを作る方法は様々あり、それぞれに特徴がありましたので、今回はその中でもcssのTransitionプロパティとKeyframe Animationプロパティについてまとめていきたいと思います。
Transitionとは
Transitionには「移り変わり、移行、変遷、変化…」という意味があり、アニメーション（変化）が始まって終わるまでの時間を設定するプロパティとなっています。
Transitionには、5つのプロパティがあり、それらをtransitionプロパティのみで一括指定することも可能です。
| transition-property | トランジションによるアニメーションを適用するCSSプロパティの名前（widthやheightなど)を指定します。名前を指定したプロパティのみがアニメーションの対象となり、それ以外のプロパティの変更は即座に反映されます。デフォルト値はallで、トランジションの効果を適用できる全てのプロパティを指定します。 |
|---|---|
| transition-duration | トランジションによるアニメーションが完了までにかかる時間を秒数、またはミリ秒数で指定します。デフォルト値は0sで、アニメーションは実行されません。 |
| transition-timing-function | 対象となるCSS プロパティの変化の度合い（変更速度）を指定します。デフォルト値はeaseで、アニメーション開始時と終了時はゆっくり変化します。 |
| transition-delay | トランジションによるアニメーションが始まるまでの時間を指定します。デフォルト値は0sで、即座にアニメーションが開始されます。 |
| transition | 上記の4つのプロパティを一括で指定することが出来ます。デフォルト値は各プロパティのデフォルト値と同じです。 |
Keyframe Animationとは
@Keyframeとanimationはセットで使うプロパティです。@Keyframeでは、キーフレームアニメーションの対象となるプロパティとその変化量を指定し、そのアニメーションの名前を設定します。０〜１００％までの値を指定し、時間経過を元に指定した値に変化します。
animationには８つのプロパティがあり、それらをanimationプロパティのみで一括指定することも可能です。
| animation-name | 要素に適用される1つまたは複数のアニメーションを指定します。指定する名前は@keyframesで設定した名前です。デフォルト値はnoneで、キーフレームがないことを意味しています。 |
|---|---|
| animation-duration | キーフレームによるアニメーションが完了までにかかる時間を秒数、またはミリ秒数で指定します。デフォルト値は0sで、アニメーションは実行されません。マイナス（例：-1s)での秒数指定も可能で、指定した秒数経過したアニメーションの状態から開始となります。 |
| animation-timing-function | 対象となるCSSプロパティの変化の度合い（変更速度）を指定します。デフォルト値はeaseで、アニメーション開始時と終了時はゆっくり変化します。 |
| animation-delay | キーフレームによるアニメーションが始まるまでの時間を指定します。デフォルト値は0sで、即座にアニメーションが開始されます。 |
| animation-iteration-count | キーフレームによるアニメーションが停止するまでにアニメーションが再生される回数を指定します。デフォルト値は1で、一回だけアニメーションが実行されます。infiniteを指定すると無制限にアニメーションが繰り返されます。 |
| animation-direction | アニメーション再生の向きを指定します。向きの種類は、順方向、逆方向、毎回反転する初回順方向、毎回反転する初回逆方向、の４種類です。デフォルト値はnormalで、順方向です。 |
| animation-fill-mode | アニメーションの開始前、終了後のスタイルを指定できます。デフォルト値はnoneで、アニメーション開始前、終了後にスタイルの保持はありません。 |
| animation-play-state | アニメーションの状態を示します。状態の種類は実行中と停止中の２種類です。JavaScriptを利用して、アニメーションの状態を判定することや、値を設定することでアニメーションの一時停止や再開を行うことができます。 |
| animation | 上記の4つのプロパティを一括で指定することが出来ます。デフォルト値は各プロパティのデフォルト値と同じです。 |
TransitionとKeyframe Animationの特徴
大まかにTransitionとKeyframe Animationについて説明しましたが、一見すると似たような設定内容でほとんど違いが無いように思えますが、この２つのプロパティの大きな違いはアニメーションが往復なのか片道なのかです。
下記はTransitionとKeyframe Animationをそれぞれhoverした時の比較です。
See the Pen oPWVXm by tukune3 (@tukune3) on CodePen.0
Transitionは往復のアニメーションなのに対して、Keyframe Animationは片道のアニメーションです。Transitionを使って片道のアニメーションを作ることや、Keyframe Animationを使って往復のアニメーションをを作ることは出来ますが、あまり有用的とは言えません。
Transitionは往復するアニメーションで欠かせない変化した値の保持が出来るため下のようにhover中にマウスを離しても離した時点の変化の値を保持し、変化にかかった経過時間の分のアニメーションを実行します。一方で、Keyframe Animationは片道のアニメーションとして繰り返す回数の指定やアニメーション開始前と終了後のスタイルの指定など出来ることは様々あります。
まとめ
アニメーションを作る際はTransitionとKeyframe Animationのそれぞれの特徴を考えて、そのアニメーションに合ったプロパティを利用して作成しましょう。ただTransitionとKeyframe Animationは複数のアニメーション同士を繋ぐ場合はあまり向いていない（jsで制御しないといけない）ので、複雑なアニメーションや状況によって変化するアニメーションを作成する際はjsやjqueryを使って制御するか、アニメーション関連のプラグインを利用することがオススメです！