ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

【初めてアニメーションを作る方必見!!】Transitionと@Keyframe animationの違いとは?

こんにちは、ジーニアスウェブの平です。

最近、アニメーションについて学ぶ機会があったのですが、アニメーションを作る方法は様々あり、それぞれに特徴がありましたので、今回はその中でも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では、キーフレームアニメーションの対象となるプロパティとその変化量を指定し、そのアニメーションの名前を設定します。0〜100%までの値を指定し、時間経過を元に指定した値に変化します。
animationには8つのプロパティがあり、それらを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 アニメーション再生の向きを指定します。向きの種類は、順方向、逆方向、毎回反転する初回順方向、毎回反転する初回逆方向、の4種類です。デフォルト値はnormalで、順方向です。
animation-fill-mode アニメーションの開始前、終了後のスタイルを指定できます。デフォルト値はnoneで、アニメーション開始前、終了後にスタイルの保持はありません。
animation-play-state アニメーションの状態を示します。状態の種類は実行中と停止中の2種類です。JavaScriptを利用して、アニメーションの状態を判定することや、値を設定することでアニメーションの一時停止や再開を行うことができます。
animation 上記の4つのプロパティを一括で指定することが出来ます。デフォルト値は各プロパティのデフォルト値と同じです。

TransitionとKeyframe Animationの特徴

大まかにTransitionとKeyframe Animationについて説明しましたが、一見すると似たような設定内容でほとんど違いが無いように思えますが、この2つのプロパティの大きな違いはアニメーションが往復なのか片道なのかです。
下記は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を使って制御するか、アニメーション関連のプラグインを利用することがオススメです!