CSSのtransitionによるアニメーションを勉強してみる

css

今更ですが、transitionによるCSSアニメーションの勉強してみる。
よくあるのが、マウスオーバーしたら色が変わるとか拡大・縮小だったりなどいろいろですが、これまでJavascript (jQuery)などで対応していたものも最近、transitionが主流になってると感じるので復習も兼ねて忘備録。

transitionのプロパティを見てみよう

transitionにはいくつあのプロパティがあるので、それをまずは知ることから始めてみる。

transition-property :変化の対象

これは、フォントカラーや幅・高さ、といった要素のどの部分のプロパティを対象とするのかを決める。複数の要素を対象とする場合は、「,(コンマ)」で繋げていく。
このプロパティを省略する・もしくは「all」を指定するとプロパティすべてが対象になります。

transition-duration :変化の時間

これは変化させる開始から終了までの 時間(秒またはミリ秒)を指定します。例えば3秒なら「3s」と指定します。

transition-delay: 開始を遅延させる 

これはアニメーションの開始時間を遅らせる場合に設定します。
例えば、ロールオーバーしてから2秒後にアニメーションを開始させる場合は「2s」とします。

transition-timing-function: イージング の設定

これは イージング によるアニメーションに緩急をつけたりするプロパティです。いくつか用意されています。*下記参照

  • ease(開始と終了を滑らかに)
  • linear(一定)
  • ease-in(開始がゆっくり)
  • ease-out(終了がゆっくり)
  • ease-in-out(開始と終了がゆっくり)
  • cubic-bezier(※) これはちょっと複雑なので省きます。

transitionの書き方を見てみよう

ではここから実際にtransitionの書き方を見てみよう。

通常の書き方。

まずはtransitionのプロパティすべてを記載した書き方です。
例としてフォントサイズを変化させたい場合。

省略した書き方

実はtransitionはbackgroundと同じように省略して記載する事ができます。
順番は「property duration timing-function delay」の順番です。半角スペースを空けて書いていきます。

アニメーションを実行させるには?

transitionの設定の方法は説明した通りですが、これをアニメーションを実行させるには、ロールオーバーやJSなどでクラスを特定のクラスが追加させた時に実行させます。その際にCSSで変化させたいプロパティを設定します。実際にサンプルでロールオーバーしたらフォントサイズの色を変えて、クリックしたらフォントサイズを変更してみます。

See the Pen transitionによるアニメーション by 石切山 公宏 (@kirikirimai) on CodePen.

複数のプロパティを変化させるには?

今度はいろんなパターンを見ていきましょう。今後はすべて省略した形でtransitionアニメーションを書いていきます。

複数のプロパティ同時にアニメーションさせる

複数のプロパティをまとめてアニメーションさせるなら、「transition-property」を省略か「all」にすればいいです。

参考例としてボックスの「幅」「高さ」「背景色」を変化させたい場合。

See the Pen transitionに複数のプロパティを変更 by 石切山 公宏 (@kirikirimai) on CodePen.

変化するスピードをプロパティ事に変えたい場合

上記の例だと幅・高さ・背景色を同じスピードで変化させましたが、別々に変化させたい時もあるかと思います。その場合は、「transition-property」「 transition-duration」を別々に記載する方法と省略する方法があります。

別々に記載する場合

見ていただくと分かる通り、 「transition-property」「 transition-duration」 それぞれ変化させるプロパティとスピードを「,(コンマ)」で区切って指定します。

省略して記載する場合

省略する場合は、変化させるプロパティとスピードを半角スペースを空けて1セットとして、ほかのプロパティと「,(コンマ)」で区切っていきます。

See the Pen 変化するスピードをプロパティ事に変えたい場合 by 石切山 公宏 (@kirikirimai) on CodePen.

transitionのブラウザ対応について

ほとんどはブラウザ対応は出来ていますが、昔のIEとは対応できなさそうですね。それ以外だと普通に対応してるので、使っても問題ないんじゃないかなと思います。

 transitionのブラウザ対応の状況
transitionのブラウザ対応の状況

古いブラウザに対して対応させるためにはベンダープレフィックスでも記載しておくのも良いかと思います。

まとめ

transitionプロパティについて、まとめてみましたが、以前のようにJavascriptやjQueryで記載することよりtransitionによるアニメーションが増えてきたと思います。
次回は移動へ変形といった部分にも触れてみたいと思います。