問題一覧に戻る
上級CSS基礎
問題55: アニメーションタイミング
高度なアニメーションタイミングを実装しましょう!
📝 タスク1: 1つ目の___に@keyframes bounceを入れてアニメーションを定義
📝 タスク2: 2つ目の___に0%, 100% { transform: translateY(0); }を入れて開始・終了位置を設定
📝 タスク3: 3つ目の___に50% { transform: translateY(-50px); }を入れて中間位置を設定
📝 タスク4: 4つ目の___にanimation: bounce 1s ease-in-out infiniteを入れてバウンスアニメーションを適用
📝 タスク5: 5つ目の___にfadeInを入れてフェードインアニメーションを定義
📝 タスク6: 6つ目の___にslideInを入れてスライドインアニメーションを定義
📝 タスク7: 7つ目の___にanimation: slideIn 0.5s ease-out calc(var(--index) * 0.1s) bothを入れてスタガーアニメーションを適用
HTML(読み取り専用)
CSS コードエディタ
リアルタイムプレビュー