0Pricing
CSS Academy · レッスン

アニメーションの連結とシーケンス化

複数のアニメーションを段階的な遅延で連結し、複雑なシーケンスを作成します。

「アニメーションの連結とシーケンス化」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

アニメーションを順序付ける理由

複雑なUIエフェクトでは、複数のアニメーションを順番に実行することがよくあります。たとえば、要素がスライドインし、一時停止してからフェードアウトする場合です。CSSには、JavaScriptを使わずにアニメーションを連結するためのツールがいくつか用意されています。

animation-delayを使った順序付け

最もシンプルな順序付けは、前のアニメーションの継続時間を基に、次のアニメーションをいつ開始するか計算する方法です。

<div class="element">Slides in, then fades out</div>

複数段階のキーフレーム

1つの要素に対する最もすっきりした方法は、パーセンテージの経由点を使い、シーケンス全体を1つの@keyframesルールに記述することです。

<div class="toast">Notification toast</div>

継続時間のためのCSSカスタムプロパティ

CSS変数に継続時間を保存すると、連結したアニメーション全体で簡単に調整できます。

<div class="box">Custom-property-driven timing</div>

animation-timeline（最新の機能）

Web Animations APIとスクロール連動アニメーション（ScrollTimeline）を使うと、遅延時間の計算をせずに高度な順序付けができます。これは、複雑なCSSアニメーションを調整するための将来の方法です。

CSSカスタムプロパティによる段階化

インラインまたはJavaScriptで設定したCSSカスタムプロパティから、段階的な遅延を制御します。

<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>

JavaScriptによる順序付け

複数の要素による精密なシーケンスには、Web Animations APIやGSAPのようなライブラリを使います。複雑な依存関係を持つ独立した要素を連携させる場合、CSSだけでは限界があります。

注意喚起アニメーション

パルスしてから落ち着く注意喚起アニメーションのシーケンスです。

<div class="notification">New message!</div>

AnimationEndイベント

JavaScriptでanimationendを監視すると、次のステップをプログラムから開始できます。

<div class="box" id="ae-box">Watch me</div>
<script>
  const el = document.getElementById('ae-box');
  el.addEventListener('animationend', (e) => {
    if (e.animationName === 'slideIn') {
      el.classList.add('phase-2');
      el.textContent = 'animationend fired!';
    }
  });
</script>

ページトランジションパターン

クラスの切り替えを使ったCSSページトランジションのシーケンスです。

<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>

ローディング状態のスケルトン

オフセットを使った複数段階のスケルトンローディングアニメーションです。

<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>

クイックチェック

CSSで1つの要素に対する完全な複数段階のアニメーションシーケンスを記述する最適な方法は何ですか。

振り返り

CSSアニメーションの順序付けには、前のアニメーションの継続時間に合わせた遅延、パーセンテージの経由点を使った複数段階の@keyframes、または継続時間を格納したカスタムプロパティの変数を利用できます。animationendイベントを使うと、JavaScriptから順番に各フェーズを開始できます。複数の要素による複雑な制御には、Web Animations APIを検討してください。

よくある質問

「アニメーションの連結とシーケンス化」レッスンは無料ですか？

はい。「アニメーションの連結とシーケンス化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「アニメーションの連結とシーケンス化」で何を学びますか？

複数のアニメーションを段階的な遅延で連結し、複雑なシーケンスを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「アニメーションの連結とシーケンス化」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. @keyframesの構文とanimationプロパティ
  2. アニメーションの方向・フィルモード・反復
  3. アニメーションの連結とシーケンス化
  4. prefers-reduced-motionに対応したアクセシブルなアニメーション
← CSS Academyに戻る