css-animations

Editframe の CSS アニメーション

Editframe のタイムラインシステムはアニメーションを一時停止し、animation.currentTime を使って手動で制御します。アニメーションが始まる前に要素が DOM に存在するため、fill-mode が重要です。

ef-text と ef-text-segment — fill-mode は自動設定

ef-text または ef-text-segment クラスを使ったテキストアニメーションでは、fill-mode を設定しないでください。計算後の値が none の場合、システムは自動的に backwards をデフォルトとして設定します。

/* ✅ Just write the animation — fill-mode is handled */
ef-text {
  animation: fade-in 1s 500ms;
}

.my-segment-class {
  animation: slide-up 800ms var(--ef-stagger-offset);
}

理由がある場合にのみ、上書きしてください。

/* Explicit exit animation that needs forwards */
.my-segment-class {
  animation: fade-out 500ms forwards;
}

その他の要素 — fill-mode は引き続き必要

コンポジション内の通常の HTML 要素（div、h1 など）では、引き続き fill-mode を明示的に設定する必要があります。

入場アニメーション → backwards

/* ❌ Element shows natural state during delay */
animation: fade-in 1s 500ms;

/* ✅ Holds initial keyframe during delay */
animation: fade-in 1s 500ms backwards;

退出アニメーション → forwards

/* ❌ Element snaps back after fading out */
animation: fade-out 500ms;

/* ✅ Holds final keyframe after animation ends */
animation: fade-out 500ms forwards;

入場と退出の組み合わせ → both

animation:
  fade-in 1s backwards,
  fade-out 500ms calc(var(--ef-duration) - 500ms) forwards;

/* or */
animation: fade-in-out 2s both;

開発モードでの検証

システムは、fill-mode が設定されていない要素について、ブラウザーのコンソールに警告を表示します。

🎬 Editframe Animation Fill-Mode Warning
⚠️  Animation "fade-in" has a 500ms delay but no 'backwards' fill-mode.
   Fix: Add 'backwards' or 'both' to the animation shorthand.

技術的な背景

• none（デフォルト）：アニメーションの前後にスタイルは適用されません
• forwards：アニメーション終了後も、最後のキーフレームのスタイルが保持されます
• backwards：アニメーション開始前に、最初のキーフレームのスタイルが適用されます（遅延時間中も適用）
• both：両方を組み合わせたものです

Editframe は animation.currentTime を直接制御します。fill-mode がないと、ブラウザーはキーフレームのスタイルではなく要素本来のスタイルを適用するため、目に見える「ちらつき」が発生します。

リソース

• MDN：animation-fill-mode
• 実装：elements/packages/elements/src/elements/EFText.ts、updateAnimations.ts