CSSでアニメーションを実現できる１つの方法として、CSS Transitionsについて、基本文法を解説します。
とにかく動かしてみる
グリーンの四角にマウスを合わせると動き出します。
See the Pen CSS transitions-basic by naoq (@naoq) on CodePen.
書き方
考え方は、以下の２つのポイントを意識します。
- 開始状態のセレクタに対して、transition プロパティを使用して変化させたいプロパティごとに時間や速度変化などの条件（トランザクションのサブプロパティ）を指定していきます。
- 終了状態のセレクタ（:hoverなど）に対して変化後のスタイルを指定します。
animationsより簡単ですが、開始から終了の間の中間で条件を付けられないので複雑な変化ができません。
変化できるプロパティ
色やサイズ、位置など様々なプロパティが変化させられます。
以下のページで変化させられるプロパティが確認できます。
アニメーション可能な CSS プロパティ - CSS: カスケーディングスタイルシート | MDN
CSS アニメーションおよびトランジションアニメーション可能なプロパティの概念に頼っており、特に指定しない限り、すべての CSS プロパティはアニメーション可能です。各プロパティのアニメーションの種類は、このプロパティに対する値の結合方法（...
developer.mozilla.org
変化（期間、方向、スピード）の設定
変化の条件を設定するトランジションのサブプロパティ以下の４つです。
- transition-property・・・ CSS プロパティの名前を指定します。
- transition-duration・・・実行にかかる所要時間を指定します。
- transition-timing-function・・・中間状態の値を計算する方法（速度変化）を定義します
- transition-delay・・・トランジションが実際に始まるまでの待ち時間（遅延時間）
１行で指定したりできます。
カンマで区切って複数の指定ができます。
transition: background-color 2s ease-in 3s ,
transform 2s ease-in 3s;
//taransition: プロパティ名 所要時間 速度変化 開始遅延 ,…, …;
すべてのプロパティに対して同じ条件で変化させるなら、プロパティ名に「all」を使うと便利です。
transition: all 5s ease-in 2s;See the Pen CSS transitions-sample1 by naoq (@naoq) on CodePen.
まとめ
開始状態から終了状態までの単純な変化ならAnimationsより簡潔にコードが書けます。
