css-animations

HyperFrames の CSS アニメーション

HyperFrames では、css ランタイムアダプターを使用して CSS キーフレームアニメーションのシークができます。シンプルな反復パターン、背景の動き、きらめき、グロー、マスク、シーケンスに依存しない装飾に使用してください。

シーンの演出には、通常 GSAP のほうがわかりやすくなります。CSS アニメーションは、動きが 1 つの要素に属し、継続時間が固定されている場合に最適です。

契約

• ランタイムの初期化が完了する前に、アニメーション対象の要素を DOM に配置してください。
• 時間指定された要素には data-start の値を設定し、ローカルのアニメーション時間がクリップと一致するようにしてください。
• WAAPI による CSS アニメーションに対応していない環境では、負の遅延によるフォールバックで無期限の再生時間を表現できないため、有限の animation-duration と animation-iteration-count を使用してください。
• シークした状態がアニメーションの前後でも維持されるよう、animation-fill-mode: both を優先してください。
• 壁時計に基づく JavaScript、ホバーでトリガーされる状態、ユーザーイベントに依存するクラスの切り替えは避けてください。

このアダプターは、計算済みの animation-name を持つ要素を検出し、利用可能な場合はブラウザーの Animation ハンドルをシークします。利用できない場合は、負の animation-delay で一時停止する方法にフォールバックします。

基本パターン

<div
  id="pulse-ring"
  class="clip pulse-ring"
  data-start="0"
  data-duration="4"
  data-track-index="2"
></div>

<style>
  .pulse-ring {
    width: 280px;
    height: 280px;
    border: 4px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation-name: pulse-ring;
    animation-duration: 1200ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
    animation-iteration-count: 3;
    animation-fill-mode: both;
  }

  @keyframes pulse-ring {
    from {
      opacity: 0;
      transform: scale(0.82);
    }
    35% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: scale(1.18);
    }
  }
</style>

スタッガーパターン

キーフレームの重複を避けるには、CSS カスタムプロパティを使用します。

<div class="clip dots" data-start="1" data-duration="3" data-track-index="3">
  <span style="--i: 0"></span>
  <span style="--i: 1"></span>
  <span style="--i: 2"></span>
</div>

<style>
  .dots span {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-pop 900ms ease-out both;
    animation-delay: calc(var(--i) * 120ms);
  }

  @keyframes dot-pop {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.75);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
</style>

適した用途

• 繰り返し回数が決まっている装飾的なループ。
• マスク、グロー、きらめき、粒子、控えめなパララックスのレイヤー。
• 完全な JS タイムラインを用意するほどではない、シンプルな単一要素の登場アニメーション。

避けること

• シーク可能な WAAPI 対応 CSS アニメーションハンドルがブラウザーから公開されることを確認していない場合、無限 CSS アニメーションは避けてください。表示時間をカバーする有限の繰り返し回数を使用してください。
• transform で対応できる場合は、top、left、width、height などのレイアウトプロパティのアニメーションは避けてください。
• レンダリングに不可欠な動きを、ホバー、フォーカス、スクロール、メディアクエリーによるトリガーに依存させないでください。
• 別の決定論的なタイムラインで変更を制御していない限り、起動後にアニメーションクラスを変更しないでください。

検証

CSS アニメーションの構成を編集した後は、次を実行してください。

npx hyperframes lint
npx hyperframes validate

クレジットと参考資料

• HyperFrames アダプターのソース：packages/core/src/runtime/adapters/css.ts。
• MDN の CSS アニメーションに関するドキュメント：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
• MDN の animation-fill-mode：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode