アニメーションの方向・フィルモード・反復
アニメーションの再生方向、ループ回数、fill-modeによる最終状態を制御します。
「アニメーションの方向・フィルモード・反復」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
animation-iteration-count
アニメーションを繰り返す回数を制御します。連続してループさせるにはinfiniteを使います。
<div class="spinner"></div>
<div class="pulse"></div>
animation-direction
交互に繰り返すサイクルでの再生方向を制御します。
normal— 各反復を順方向に再生しますreverse— 逆方向に再生しますalternate— 順方向と逆方向を交互に再生しますalternate-reverse— 逆方向と順方向を交互に再生します
<div class="bounce"></div>
animation-fill-mode
アニメーションの開始前と終了後に、要素をどう扱うかを定義します。
none— デフォルト値で、元の状態に戻りますforwards— 完了後も最後のキーフレームを保持しますbackwards— 遅延中に最初のキーフレームを適用しますboth— backwardsとforwardsの両方を適用します
forwardsフィルモード
最も一般的な用途は、アニメーションの完了後も要素をアニメーション後の最終状態に保つことです。
<p class="item">I fade in and stay visible</p>
backwardsフィルモード
遅延がある場合、backwardsを指定すると、遅延中から要素が最初のキーフレームの状態になります。これにより、アニメーション開始前に元の状態が一瞬表示されるのを防げます。
<p class="item">Starts invisible during the delay</p>
bothフィルモード
bothはforwardsとbackwardsを組み合わせたものです。アニメーションの前後で要素が一瞬表示されるのを防ぎたい場合に、最も予測しやすい選択肢です。
animation-delay
アニメーションの開始を遅らせます。負の遅延を指定すると、アニメーションを途中から開始できます。複数のアニメーションの同期に便利です。
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
段階的なアニメーションパターン
nth-childの遅延を使ったCSSだけの段階的なアニメーションです。
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
一時停止と再開
animation-play-stateを変更することで、JavaScriptからアニメーションの状態を切り替えます。
<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>
アニメーションのリセット
CSSアニメーションを再生し直すには、クラスを削除してから再度追加します。ブラウザーは、削除と追加の間に強制的なリフローを発生させるというテクニックを適用します。
<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>
負のanimation-delay
負の遅延を使うと、アニメーションを再生途中から開始できます。同期した背景パターンや、すでに動いているように見せたいループ要素に便利です。
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
クイックチェック
アニメーション終了後も要素を最後のキーフレームの状態に保つanimation-fill-modeの値はどれですか。
振り返り
animation-iteration-count: infiniteはアニメーションを無限に繰り返します。animation-direction: alternateは往復するように再生します。animation-fill-mode: forwardsは最終状態を保持します。animation-fill-mode: bothは最も安全な選択肢です。同期したアニメーションの開始位置をずらすには、負の遅延を使ってください。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「アニメーションの方向・フィルモード・反復」レッスンは無料ですか？
はい。「アニメーションの方向・フィルモード・反復」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「アニメーションの方向・フィルモード・反復」で何を学びますか？
アニメーションの再生方向、ループ回数、fill-modeによる最終状態を制御します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「アニメーションの方向・フィルモード・反復」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @keyframesの構文とanimationプロパティ
- アニメーションの方向・フィルモード・反復
- アニメーションの連結とシーケンス化
- prefers-reduced-motionに対応したアクセシブルなアニメーション