css-animations

Editframe 中的 CSS 动画

Editframe 的时间轴系统会暂停动画，并通过 animation.currentTime 手动控制动画。元素会在动画开始前就存在于 DOM 中，因此填充模式很重要。

ef-text 和 ef-text-segment——填充模式会自动设置

对于 ef-text 上的文本动画或通过 ef-text-segment 类实现的文本动画，不要设置填充模式。如果计算后的值为 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;
}

其他元素——仍需设置填充模式

对于合成中的普通 HTML 元素（如 div、h1 等），仍必须显式设置填充模式。

入场动画 → 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;

开发模式验证

如果任何元素缺少填充模式，系统会在浏览器控制台中发出警告：

🎬 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。如果没有填充模式，浏览器会应用元素的自然样式，而非关键帧样式，从而导致可见的“闪烁”。

资源

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