CSS ・ アニメーション
@keyframes
アニメーションの中間状態
アニメーションの途中経過（キーフレーム）を、0%〜100% の時点ごとに定義します。animation プロパティで要素に適用します。
01
サンプルコード
HTML
1<div class="stage">
2 <div class="ball"></div>
3</div>
CSS
1.stage {
2 height: 90px;
3}
4.ball {
5 width: 32px;
6 height: 32px;
7 border-radius: 50%;
8 background: #b68235;
9 animation: bounce 1.4s ease-in-out infinite;
10}
11@keyframes bounce {
12 0%, 100% {
13 transform: translate(0, 0);
14 }
15 25% {
16 transform: translate(100px, 50px);
17 }
18 50% {
19 transform: translate(200px, 0);
20 }
21 75% {
22 transform: translate(100px, 50px);
23 }
24}
02
実行結果
ブラウザでの表示
03
解説
@keyframes 名前 { … } の中に、アニメーションの各時点でのスタイルを書きます。0% が開始時、100% が終了時で、その間はブラウザが自動でなめらかにつなぎます。
開始と終了だけなら from・to と書けます。0%, 100% のようにカンマで区切ると、複数の時点に同じスタイルを指定できます。
定義しただけでは動きません（あくまで定義するだけ）。animation プロパティで名前と再生時間を指定して、要素に適用します。名前を変えれば、@keyframes はいくつでも作れます。
04
応用例・注意点
書き方
| キーワード | 説明 |
|---|---|
from | 開始時（0% と同じ） |
to | 終了時（100% と同じ） |
50% | 途中の時点 |
0%, 100% | 複数の時点をまとめて指定 |
くるくる回るローディング
360度回転を繰り返すだけのシンプルな例です。
HTML
1<div class="spinner"></div>
CSS
1.spinner {
2 width: 24px;
3 height: 24px;
4 border: 3px solid #e1ad66;
5 border-top-color: transparent;
6 border-radius: 50%;
7 animation: spin .8s linear infinite;
8}
9@keyframes spin {
10 to {
11 transform: rotate(360deg);
12 }
13}
注意点
- 01@keyframes の名前はサイト内で重複しないようにします。
- 02動きを減らす設定の利用者向けに、@media (prefers-reduced-motion: reduce) で animation を止めます。