| ルール名 | @keyframes |
|---|---|
| 構文 | @keyframes name { ... } |
| サポート | https://caniuse.com/?search=%40keyframes |
animation プロパティによるアニメーションのフレームを定義します。name に animation-name プロパティで指定するフレーム名を定義します。下記の例では、赤から青に変わるフレームを定義しています。アニメーションに関する概要は animation を参照してください。
@keyframes myframe {
from {
color: red;
}
to {
color: blue;
}
}
次の例では、最初(0%) 50×0px の赤、途中(50%) 50×50px の青、最後(100%) 100×50px の緑の矩形をアニメーションで描画するフレームを定義しています。from は 0%、to は 100% と同じ意味を持ちます。
@keyframes myframe {
from {
width: 50px;
height: 0px;
background: red;
}
50% {
width: 50px;
height: 50px;
background: blue;
}
to {
width: 100px;
height: 50px;
background: green;
}
}
@keyframes myframe {
from {
width: 50px;
height: 0px;
background: red;
}
50% {
width: 50px;
height: 50px;
background: blue;
}
to {
width: 100px;
height: 50px;
background: green;
}
}
.test {
animation: myframe 2s infinite both;
}
<div class="test"></div>