TransitionとAnimationはどう使い分ける？使い方から解説【CSSアニメーション】

CSSとは、主にWEBページの見た目を整える言語であり、さらにWEBページの要素をアニメーションさせることができる機能が、「CSSアニメーション」です。

CSSアニメーションは非常に多くのサイトで利用されており、ページの使いやすさ、わかりやすさ、親しみやすさなど、UI/UXの領域で役立っています。

アニメーションさせる方法は「Transitionプロパティ」を使う方法と、「Animationプロパティ」を使う方法の2種類があります。

一見難しそうに見えますが、基本がわかれば簡単に動作してくれるところがCSSアニメーションのいいところです。

本記事ではCSSアニメーションのややこしい部分である、「TransitionとAnimationの使い分け」について解説していきます。

TransitionとAnimation、どちらが使いやすいのかという質問をネットで見かけることもありますが、結論としては、どちらも使い分けるのが有効かと思われます。

理由としては、それぞれの得意な領域が異なるからです。

まずは両者の特徴から確認していきます。

・アニメーションのループがない
ループ再生がないので、何かの要素を動かし続けるようなアニメーション(ページのローディング画面に使われるアイコンなど)にはあまり向いていません。

・A→Bといった1方向の簡単なアニメーションのみ対応
Aの状態からBの状態へ変化するといった簡単なアニメーションに対応しています。
ボタンをhoverした際のアニメーションなど、サイト内のアニメーションは簡単なエフェクトをつけてあげるだけで十分な場合も多くあります。
コード記述量も少ないため、コードとしてはすっきり書くことができます。

・アニメーション後に最初の状態へ戻る動きがある
例えば、hoverの指定によってボタンのマウスオーバー時に色を変えるアニメーションをつけているとします。
その場合、マウスオーバーを解除したら最初のプロパティまで戻る性質があります。
このような行きと帰りのアニメーションは速度を調節できるので、ボタンや商品のリンクなどのhoverアニメーションとして使われることが多いです。

・activeやhoverなどのきっかけがないと動かない(トリガーが必要)
ページを読み込んだ直後や、開始時間を設定してアニメーションする機能はなく、activeやhoverといったユーザーのアクションをきっかけに動作するアニメーションになっています。

・アニメーションのループ機能がある
アニメーションをループさせたり、アニメーションの実行回数を設定することができます。
トップページの導入アニメーションや、固定ヘッダーでループしている会社ロゴのアニメーションなどで多く見られます。

・A→B→C→B→Dといった、複雑なアニメーションを組むことができる
色を数色にもグラデーションをさせたり、形を複雑に変化させたりすることが可能です。
また、画像を何枚も用意してパラパラ漫画のようにアニメーションさせることなども可能です。

・activeやhoverといったユーザーアクションを解除した際に、戻るアニメーションが入らない
アニメーションの再生と逆再生の設定自体は可能ですが、クリックやマウスオーバーを伴うようなユーザーアクションが解除されたと同時に、元のプロパティまで戻ってくれるTransitionのような機能はありません。
そのため、メニューボタンなどにAnimationプロパティを指定する場合は、挙動が不自然にならないようにするか、そもそもTransitionを使うことが多いようです。

・ページを読み込んですぐに実行することが可能(トリガーが必要ない)
ページの読み込み直後や、ページを読み込んで何秒後にアニメーションを実行するかといった設定をすることができます。

まずはループ機能から検証します。

下のボタンに対してマウスオーバーしてみてください。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

Transitionはループしないので、マウスオーバー後0.5秒でアニメーションが止まります。

対してAnimationの方は、マウスオーバーしてる間アニメーションがループし続けています。

次に、アニメーションの複雑さを下のボタンで比べてみます。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

TransitionはA→Bのような1点の変化しかできないのに対して、Animationは様々な色に変化できていることがわかります。

ここに要素の大きさや位置の変化などを足すことで、Animationプロパティでは、より複雑なアニメーションも可能になります。

次に、マウスアウトして最初のプロパティに戻るときの動きを比べてみます。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

Transitionのボタンはマウスアウトしてからゆっくり逆再生して元に戻っているのに対し、Animationのボタンはマウスアウトしたらすぐに最初の状態に戻ってしまっています。

ボタンのアニメーションとしてはシームレスな動きをするTransitionが好まれている傾向があります。

最後に、アニメーション実行のタイミングを比べてみます。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

Transitionはhoverなどのアクションのきっかけがないとアニメーションが実行されませんが、Animationは最初からopacity(透過度)のアニメーションが実行され、点滅しています。

また、マウスオーバーした際には色が変わるアニメーションも実行されており、様々なタイミングでアニメーションを実行できることがわかります。

アニメーション実行のタイミングは、Animationプロパティの方が融通が効くようです。

では、実際にTransitionを使う方法を説明していきます。

一番使われるhoverでの使い方を例にしますので、まずは下のボタンのようにCSSで基本的なhoverの設定をします。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

今のままだと変化を繋ぐようなアニメーションはされず、急にプロパティが切り替わる仕様になっています。

ここにTransitionを記述していくことで、アニメーションさせることができます。

詳細のプロパティは以下の4つです。

transition-property: 〇〇;
colorやopacityなど、変化させたいプロパティを指定します。複数のアニメーションを書く場合が多いので、ほとんどの場合は全てのプロパティを対象にする「all」と指定します。

transition-duration:〇〇;
1s、5sなど、アニメーションが開始してから終了するまでの時間を指定します。sはsecond(秒)の意味です。0.5sなどの小数点も可能です。

transition-timing-function: 〇〇;
ゆっくりアニメーションが始まったりするような、動きの特徴を指定します。
基本的な4つを紹介しますが、transition-timing-functionは指定方法が多いので、興味のある方は調べてみてください。
[ease] 開始時と終了時はゆるやかに変化
[ease-in] 開始時はゆるやか。終了時は急に変化
[ease-out] 開始時は急に変化。終了時はゆるやか
[linear] 開始から終了まで一定の変化

transition-delay:〇〇;
hoverなどの実行のきっかけが発生してから、実際にアニメーションが始まるまでの時間を指定します。2sと指定すれば、2秒遅れてからアニメーションが実行されます。

以上のプロパティは、実際には1行で省略して記述する「ショートハンド」と呼ばれる方法で書かれることが多いです。

ショートハンドで記述する場合は、

transition: all 0.5s ease 0.5s;

といったように、半角スペースを空けて詳細プロパティを記述します。

以上のプロパティを設定したボタンが下の例です。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

注意点としては、hover側だけにtransitionプロパティを記述した場合だと、マウスアウトした際に最初のプロパティまでアニメーションせずにパっと戻ってしまいます。

上の要素とhover側の両方にショートハンドを記述するのがポイントです。

Animationプロパティの使い方です。

まずはTransitionと同じように、アニメーションを指定したい要素に以下の詳細Animationプロパティを記述し、各種設定をします。

animation-name:〇〇;
アニメーションの名前を決めます。複数のアニメーションを作る場合もあるかと思いますので、区別しやすい名前を付けます。

animation-duration:〇〇;
Transitionと同じく、アニメーション開始から終了までの時間を指定します。

animation-timing-function:〇〇;
Transitionと同じく、アニメーションの変化特性を指定します。

animation-delay:〇〇;
Transitionと同じく、アニメーション実行タイミングの遅れを指定します。

animation-iteration-count:〇〇;
アニメーションの実行回数、もしくはループ再生するかどうかを指定します。
回数の場合は数字を記述し、ループ再生する場合はinfiniteを記述します。

animation-direction:〇〇;
アニメーションの再生方向を設定します。
[normal] 順再生
[reverse] 逆再生
[alternate] 順再生したあと逆再生
[alternate-reverse]逆再生したあと順再生

animation-fill-mode:〇〇;
アニメーション実行前後の状態を設定します。
[none] 実行前と実行後は元の要素の状態
[backwards] 実行前と実行後はkeyframes0%の状態
[forwards] 実行前は元の要素の状態、実行後はkeyframes100%の状態
[both]実行前はkeyframes0%の状態、実行後はkeyframes100%の状態

※keyframesは後述します。

animation-play-state:〇〇;
アニメーションを実行するのか、停止するのかを設定します。
通常はrunningを指定することで実行にしておきますが、hoverやクリックをきっかけに停止する状態を作りたいときにはpausedを設定します。

以上のプロパティも全部記述するとコードが長くなってしまうので、ショートハンドで記述します。

animation: name 10s ease 0s infinite normal none running;
のように記述すればひとまず要素に記述する部分は終わりました。

しかし、Animationプロパティはこれだけではアニメーションが実行されません。

別箇所にkeyframesというアニメーションの動きを詳細に記述するところがあるので、そちらを書いていきます。

書き方は

このように記述します。上から順番に見ていきます。

まず最初に@をつけてkeyframesと書きます。

次に書かれているnameは、要素に記述したAnimationプロパティnameの部分と同じ名前を入れます。

これで、要素とアニメーションが連動します。

それから、0%から100%までの変化させたいアニメーションを書いていきます。

上の例では0%から100%までの2点のアニメーションの変化点を記述した簡単な例なので、Transitionでも再現可能です。

これを25%、50%など細かく記述していくことで、Animationプロパティ特有の複雑なアニメーションをさせることが可能です。

では、keyframesの特性をひとつ紹介しておきます。

まずは以下のボタンにマウスオーバーし、アニメーションの変化を確認してみてください。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

2段階に色が変化するようにkeyframesを0%、50%、100%に設定しています。

これを、下の例のようにkeyframesを0%〜49%、50%〜99%と設定した場合のアニメーションの変化はどうなるでしょうか。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

0%〜49%、50%〜99%と同じ色を設定した方は、アニメーションのグラデーションがなく、急に色が変化したことがわかります。

このように、「○%〜○%まで同じ設定にする」ということで、同じアニメーションを固定することができます。

変化していくグラデーションと固定の設定を使い分けて、より細かいアニメーションを作っていくことが可能です。

最後にアニメーションの例をいくつか挙げておきます。

1、ボタンアニメーション

See the Pen by shinobi (@shinobi-hattori) on CodePen.

2、トップページの社名やサイト名などに使われるテキスト出現アニメーション
※アニメーションが終わってしまった場合は、右下のRerunを押すとアニメーションが再度読み込まれます。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

3、背景グラデーション

See the Pen by shinobi (@shinobi-hattori) on CodePen.

4、背景ストライプアニメーション
こちらはあまり見ないものですが、例として挙げておきます。

See the Pen by shinobi (@shinobi-hattori) on CodePen.

いかかでしたでしょうか。

TransitionとAnimation、どちらも状況によって使い分けていくことで真価を発揮します。

アニメーションは設定するプロパティの項目が多いと懸念されがちですが、そのような場合は「よく使うショートハンドをスニペットツールに保存しておく」のがおすすめです。

例えば、Animationプロパティのショートハンドは

animation: name 10s ease 0s infinite normal none running;

のような「よく使う型」で登録しておいて、そのときに合わせて数値などを書き換えます。

animation: 名前 時間 動作 遅延 再生回数 ;

のように、入力する内容を日本語で書いて保存するのも悪くないかもしれませんが、久しぶりに使うプロパティであれば入力するプロパティを忘れてしまっていることが多く、結局また検索して時間を取られることもあります。

そのため、全て数値の入力されている「よく使う型」でスニペットツールに登録しておくのがおすすめです。

表現の幅がぐっと広がるCSSアニメーション、ぜひ使いこなしてみてください。