CSS で transition を使ってアニメーションさせる方法について調べてみた

2023/05/22 Web

CSS でアニメーションさせる(要素を動かす)時、代表的な方法として transition プロパティを使う方法と、animation プロパティを使う方法があります。今回は私もよく使う transition プロパティについて少しまとめてみました。

Table of Contents

transition プロパティについて

transition プロパティは以下の表の通りの一括指定プロパティに値を指定することで、スタイルを操作することができます！

値のを記述する順番は基本的に property → duration → timing-function → delay です。それぞれ半角スペースを空けて指定します。必要ない部分は省略することが可能です。

複数の要素に transition を付けたい場合は、コンマで区切るとできます。例えば下記のような記述です。

transition:color 1s , opacity 0.5s;

※エディターによってはエラー表示になる場合があるので注意が必要です。

まず transition というワードは

移り変わり、変化

といった意味があります（weblio）

それを踏まえて、とある要素があり、例えばマウスオーバー（:hover）することで何か違うスタイルにさせるような CSS があったとします。

通常はマウスオーバー（:hover）すると“パチッ”とスタイルが切り替わりますが、transition で値を指定してあげることで、切り替わる途中の“移り変わる”様子をアニメーションで表示してくれます。

すごーく簡単な使い方として、マウスオーバー（:hover）することでテキストの色をふわっと変化させる記述を見てみます。

See the Pen Untitled by MATSUDAI (@matsudai) on CodePen.

上記のコードは何も難しいことはないかと思います。ちなみに transition-timing-function と transition-delay は省略しています。

このようなコードを参考にして、動かしたい要素に transition プロパティを入れてあげると簡単にアニメーションを付けることができますね！

何も知らずに transition を使っているとこの問題に直面します。私のようなコピペコーダーの人ならとりあえずテキトウにコピペして動いたから「まぁいっか！」ってなってることありませんか？

ここでその考えに、ここで終止符を打ちましょう！

ずばり、toransition を指定してあげる要素は、原則、

「変化前！」

です。ただし「変化後」に transiton を指定しても動作自体はしますが、ものによっては意図しない動きをするので注意が必要です。

具体的には、transition プロパティは、変化が発生した状態から元に戻る際にも適応されるため、変化後に指定してしまうと、変化前に戻るときに適応されないという状態になってしまうようです。

ちなみに以下のようになります。

See the Pen Untitled by MATSUDAI (@matsudai) on CodePen.

私なりの解釈ですが transition は変化の終着点になるってことのような気がします。

こんな感じ？

transitionをして「あれ？なんで動かないの！」ってなるときは以下の要素に transition を指定しているかもしれないので見直してみましょう。

・display
・visibility
・width : auto ; や height : auto ; などのautoからの変化
・position

この辺にアニメーションを付けたいなぁって思うときは、JavaScriptなどのお力をお借りすると良いみたいです。（ここでは触れませんが。）

CSSで transition を使ってアニメーションを付けたいときは、transition プロパティを変化前の要素に指定してあげる！

weblio. 「transition」. https://ejje.weblio.jp/content/transition, 2023年5月22日閲覧。