@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 | ○ |