CSSのアニメーション：transitionプロパティの利用

HTMLでアニメーションを作るにはCanvasやSVGの他にもCSSを利用する方法もあります。
今回はCSSでアニメーションが実装できるtransitionプロパティについて紹介したいと思います。

transitionプロパティで実装されるCSSのアニメーションは要素に何らかの変化や動作があったときにCSSのプロパティを変化させるものです。
単純で短時間のアニメーションに用いられることが多いです。
transitionプロパティで用いられるプロパティは以下のようなものがあります。

• transition-property:どのプロパティを変化させるか指定します。（初期値は全てですので記述しなかったらすべてのプロパティが適用させます）


• transition-duration:アニメーションが完了するまでの時間を指定します。


• transition-delay:アニメーションが始まるまでの時間を指定します。


• transition-timing-function:アニメーションの動きの度合いを指定します。（アニメーションの開始時や終了時の変化の速度などです。初期値はeaseで開始時と終了時に緩やかに動きます）


• transition:すべてのtransitionを一括して指定します。

このアニメーションはtransboxにマウスのポインタを載せたりクリックすると動きます。
これに用いられたtransitionプロパティをまとめて記述すると以下のようになります。

transition:all 500ms 0s ease;