@keyframesアニメーションの各キーフレームにおけるスタイルを定義する
@keyframes
規則はアニメーションの各キーフレームにおけるスタイルを定義します。定義したアニメーションは、animation-name
プロパティによって要素と関連付けることで、使用できます。
その他、そのアニメーションの 1 サイクルあたりの実行時間 (開始から終了までにかかる時間) については animation-duration
プロパティで、アニメーションが関連付けられた要素が読み込まれてから、実際にアニメーションが開始されるまでの遅延時間は animation-delay
プロパティで設定するなど、定義したアニメーションに対して様々な設定を加えることができます。
つまり、@keyframes
規則によってアニメーション自体を定義しておき、animation-name
プロパティをはじめとしたアニメーション関連プロパティによって実際の要素に関連付けて使用するという流れになります。
詳細説明
<custom-ident>
定義したキーフレームを識別する名前 (識別子) です。この名前は animation-name
プロパティで要素に関連付けるアニメーションを指定する際に使用されます。
from
アニメーションの開始を示します。つまり 0% と同じ意味です。
to
アニメーションの終了を示します。つまり 100% と同じ意味です。
<percentage>
0% ~ 100% の間でキーフレームの位置を示します。
@keyframesのサンプルソース
@keyframes slide-right { from { margin-left: 0px; } 50% { margin-left: 110px; opacity: 0.9; } to { margin-left: 200px; } } .animation-elm { animation-name: slide-right; animation-duration: 2s; }
/* 同じキーフレームに複数のスタイル指定が存在する場合、それらはまとめられます。 */ @keyframes slide-right { from { margin-left: 0px; } 50% { margin-left: 110px; opacity: 1; } 50% { opacity: 0.9; } to { margin-left: 200px; } } /* 上記の 50% 部分は下記のようにまとめられます。 50% { margin-left: 110px; opacity: 0.9; } */
主要ブラウザの対応
IE11 | ○ |
---|---|
Edge(EdgeHTML) | ○ |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○ |
iOS Safari | ○ |
Android Chrome | ○ |