CSS Animationsは、キーフレームを使って、時間経過とともにCSSプロパティの値を変化させることでアニメーションを実現する方法です。別名、キーフレームアニメーションと呼ばれ、後で述べるCSS Transitionsと区別するためにも、CSS Animationsはキーフレームアニメーションとして覚えた方が理解しやすいかもしれません。
CSS Animations(キーフレームアニメーション)は、アニメーションの長さや繰り返し回数、繰り返しの方法などが指定できます。次の特徴があります。
- 初めと終わりの状態がある。
- キーフレームを使って、初めと終わりの間の状態が定義できる。
- キーフレーム間の状態変化は、Webブラウザが自動的に補間してくれる。
- ブラウザネイティブな機能なので、動作が滑らか。
- ページの読み込みが終わったら、自動的にスタートする。