CSS @keyframes テクニック集 - サンプルデモ

← 記事に戻る
1. 同じ値で「待ち」を作るテクニック

20%〜70% の間は opacity:1 のまま停止します。ボタンで再生/停止を切り替えてください。

待ち付き
フェード
2. animation-direction の違い比較

ボタンをクリックすると4つの direction を同時に確認できます。

normal
reverse
alternate
alt-reverse
3. animation-delay にマイナス値を使う

同じ4秒のアニメーションでも、delay の値によって開始位置が違います。クリックでリセットできます。

delay: 0s
delay: -1s
delay: -2s
delay: -3s
4. 1文字ずつ表示アニメーション

ボタンをクリックするとテキストが1文字ずつ表示されます。