animation
アニメーションの設定
@keyframes で定義した動きを要素に適用し、再生時間や繰り返し回数などを指定します。
サンプルコード
実行結果
解説
CSSアニメーションは、HTML要素に動きや変化を加えるための CSS の機能です。animation プロパティと @keyframes を使うことで設定できます。JavaScript などの複雑なプログラム処理を必要としないため手軽に実装できますが、クリックやドラッグなど、何かしらのアクションに反応してアニメーションを開始することはできません（その場合は JavaScript を使います）。
animation は、@keyframes で名前を付けて定義した動きを要素に適用するプロパティです。transition と違い、ホバーなどのきっかけがなくても自動で再生できます。
「名前 再生時間 速度の変化 繰り返し回数 方向」のように、スペース区切りでまとめて指定します。infinite で無限に繰り返し、alternate で行きと帰りを交互に再生します。
動かすプロパティは transform と opacity にすると、描画の負荷が軽くなめらかに動きます。
応用例・注意点
個別のプロパティ
| プロパティ | 説明 |
|---|---|
animation-name | アニメーションの名前（@keyframes で付けた名前） |
animation-duration | 始まって終わるまでの時間（2s など）。初期値は 0s でアニメーションしない |
animation-timing-function | 変化の度合い（ease / linear など） |
animation-delay | 何秒後にアニメーションを始めるか |
animation-iteration-count | 繰り返し回数。初期値は 1（infinite で無限） |
animation-direction | 再生方向（alternate で往復） |
animation-fill-mode | 開始前・終了後のスタイル（forwards で終了時の状態を保つ） |
animation-play-state | 再生・停止（マウスオーバーの際に使う） |
表示時にふわっと現れる
forwards を付けると、アニメーション終了後もその状態のままになります。
注意点
- 01ホバー（:hover）に反応させるだけなら、animation より transition のほうが簡単です。
- 02点滅や激しい動きは、利用者によっては気分が悪くなる原因になります。prefers-reduced-motion で止められるようにします。
- 03width や top を動かすと描画の負荷が高くなります。transform と opacity を使います。
個別のプロパティを詳しく
例：個別のプロパティで1つずつ書く
1秒待ってから、2秒かけてフェードインし、フェードアウトと交互に永遠に繰り返します。
コードと表示の対応
animation-name: fadeIn;@keyframes fadeInで定義した動きを使うanimation-duration: 2s;1回の再生に2秒かけるanimation-delay: 1s;1秒待ってから始めるanimation-iteration-count: infinite;永遠に繰り返すanimation-direction: alternate;行き（フェードイン）と帰り（フェードアウト）を交互に再生する
animation-name
animation-name の値には、英数字、ダッシュ（-）、アンダースコア（_） が使えます。fadeIn や slide-up のように、アニメーションの動きをイメージしやすい名前にするとよいです。
animation-duration
duration は「間隔」という意味で、1回のアニメーションが終了するまでの時間を指定します。初期値は 0s となり、アニメーションは起こりません。 s は秒（second）を表し、ほかに ms（ミリ秒）も指定できます。2 のように数字だけでは効かないので、s か ms を必ず付けます。
animation-timing-function
アニメーションの変化速度を設定できます。
| 値 | 動き |
|---|---|
ease | 初期値。開始時と終了時は緩やかに変化 |
ease-in | 開始時は緩やかに変化、終了に近づくと早く変化 |
ease-out | 開始時は早く変化し、終了時は緩やかに変化 |
ease-in-out | 開始時と終了時は、かなり緩やかに変化 |
linear | 開始から終了まで一定に変化 |
step-start | アニメーションの開始時点で終了状態になる |
step-end | アニメーションが終わる時点で終了状態になる（それまでは開始時の状態のまま） |
steps(数, start または end) | 指定した整数の段階で、パラパラ漫画のように変化。start を指定すると各段階の始めに、end を指定すると各段階の終わりに切り替わる |
cubic-bezier(x1, y1, x2, y2) | 変化の度合いを任意で指定 |
animation-delay
アニメーションが始まるまでの時間（待ち時間）を指定できます。animation-delay: 1s; なら、アニメーションが適用されてから1秒後に始まります。
「画面に入ってから」ではない点に注意
- delay の時間は、ページを読み込んで アニメーションが適用された時点から 数えます。ページの下のほうにある要素は、スクロールして画面に入る前にアニメーションが終わっていることがあります。
- 「スクロールして画面内に入ったら動かす」には、JavaScript（Intersection Observer など）でクラスを付けて、そのクラスに animation を書きます。
animation-iteration-count
iteration は「反復」という意味で、アニメーションを繰り返す回数 を指定できます。初期値は 1 です。数字だけでなく、永遠に繰り返す infinite もあります。
animation-direction
アニメーションを繰り返すときに、どこから始めるか（再生方向）を指定できます。
| 値 | 動き |
|---|---|
normal | 初期値。繰り返す際に最初に戻って開始する |
reverse | 最後の状態から逆向きに再生する |
alternate | normal と reverse を交互に繰り返す（行って戻る） |
alternate-reverse | reverse と normal を交互に繰り返す。先に reverse から始まる |
animation-fill-mode
アニメーションの開始前と終了後に、どのスタイルを適用するかを指定できます。アニメーションが終わった後にどのような状態を保持したいかで値が変わります。animation-delay と組み合わせて使うことが多い です。
| 値 | 動き |
|---|---|
none | 初期値。アニメーションで指定したスタイルは、開始前・終了後には適用されない（終わると元のスタイルに戻る） |
forwards | アニメーション終了時のスタイルが、終了後にも適用される |
backwards | animation-delay で待っている間も、アニメーション開始時のスタイルが適用される |
both | forwards と backwards の両方が適用される |
たとえば「1秒待ってからフェードインし、そのまま表示しておく」なら animation-fill-mode: both; にします。backwards で待っている間も透明のままになり、forwards で終わった後も表示されたままになります。
animation-play-state
ホバーなどのアクションとともに使われるプロパティです。アニメーションしている要素にカーソルを当てたときに、アニメーションを一時停止するなどの設定ができます。
| 値 | 動き |
|---|---|
running | 初期値。アニメーションは継続される |
paused | アニメーションを停止する。running に戻すと、止まったところから再開する |
例：マウスを乗せると一時停止する
回り続ける四角にマウスを乗せると止まり、離すとその位置から再び回ります。
コードと表示の対応
animation: spin 3s linear infinite;3秒で1回転を、一定の速さで永遠に繰り返す.box:hoverマウスを乗せている間だけanimation-play-state: paused;アニメーションを一時停止する