@keyframes (キーフレーム名) {
from {
/* 最初のフレームのスタイルを記述 */
}
to {
/* 最後のフレームのスタイルを記述 */
}
}
animation: (キーフレーム名) (アニメーション時間) (イージング) ();
animation: (キーフレーム名) (アニメーション時間) (イージングの種類) (アニメーション開始時間) (アニメーション回数) (アニメーションの方向)
@keyframes (キーフレーム名) {
from {
/* 最初のフレームのスタイルを記述 */
}
to {
/* 最後のフレームのスタイルを記述 */
}
}
@keyframes (キーフレーム名) {
0% {
/* 最初のフレームのスタイルを記述 */
}
n% {
/* n%のフレームのスタイルを記述 */
}
100% {
/* 最後のフレームのスタイルを記述 */
}
}
s ms で指定します。小数も利用できます。| 値 | 動作 |
|---|---|
| ease | アニメーション開始時にはゆっくり始まり、その後速度が上がり、その後速度を落としながらアニメーションします。 |
| linear | アニメーション開始から、終了まで一定の速度でアニメーションします。 |
| ease-in | ゆっくり始まり、徐々に加速してアニメーションします。 |
| ease-out | 速い速度で始まり、徐々に減速してアニメーションします。 |
| rase-in-out | アニメーション開始時にはゆっくり始まり、徐々に加速して、アニメーション終了手前で減速してアニメーションします。 |
| cubic-bezier(数値, 数値, 数値, 数値) | 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定した曲線でアニメーションします。 |
| 値 | 動作 |
|---|---|
| (数値) | 数値で指定した回数再生します |
| infinite | 無限に再生を繰り返します |
| 値 | 動作 |
|---|---|
| normal | 純方向に再生します |
| reverse | 逆方向に再生します |
| alternate | 純方向に再生した後、逆方向に再生します |
| alternate-reverse | 逆方向に再生した後、純方向に再生します |
animation-name プロパティで設定できます。animation-duration プロパティで設定できます。animation-timing-function プロパティで設定できます。animation-delay プロパティで設定できます。animation-iteration-count プロパティで設定できます。animation-direction プロパティで設定できます。
