Back to Details

css-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Animations in Editframe

Editframe中的CSS动画

Editframe's timeline system pauses animations and manually controls them via 
animation.currentTime
. Elements exist in the DOM before their animations start, so fill-mode matters.
Editframe的时间线系统会暂停动画，并通过
animation.currentTime
手动控制它们。元素在动画开始前就已存在于DOM中，因此fill-mode至关重要。

ef-text and ef-text-segment — fill-mode is automatic

ef-text 和 ef-text-segment — fill-mode 自动处理

For text animations on 
ef-text
or via 
ef-text-segment
classes, do not set fill-mode. The system defaults to 
backwards
automatically when the computed value is 
none
.
css
/* ✅ 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);
}
Only override if you have a reason:
css
/* Explicit exit animation that needs forwards */
.my-segment-class {
  animation: fade-out 500ms forwards;
}
对于
ef-text
或通过
ef-text-segment
类实现的文本动画，请勿设置fill-mode。当计算值为
none
时，系统会自动默认使用
backwards
。
css
/* ✅ 只需编写动画 — fill-mode 已自动处理 */
ef-text {
  animation: fade-in 1s 500ms;
}

.my-segment-class {
  animation: slide-up 800ms var(--ef-stagger-offset);
}
仅在有特殊需求时才覆盖默认设置：
css
/* 需要保持最终状态的显式退出动画 */
.my-segment-class {
  animation: fade-out 500ms forwards;
}

Other elements — fill-mode is still required

其他元素 — 仍需显式设置fill-mode

For plain HTML elements inside a composition (divs, h1s, etc.), you must still set fill-mode explicitly.
对于合成内容中的普通HTML元素（如div、h1等），必须显式设置fill-mode。

Entry animations → 
backwards

入场动画 → 使用
backwards

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

/* ✅ Holds initial keyframe during delay */
animation: fade-in 1s 500ms backwards;
css
/* ❌ 延迟期间元素显示默认状态 */
animation: fade-in 1s 500ms;

/* ✅ 延迟期间保持初始关键帧样式 */
animation: fade-in 1s 500ms backwards;

Exit animations → 
forwards

退场动画 → 使用
forwards

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

/* ✅ Holds final keyframe after animation ends */
animation: fade-out 500ms forwards;
css
/* ❌ 元素淡出后会跳回原状态 */
animation: fade-out 500ms;

/* ✅ 动画结束后保持最终关键帧样式 */
animation: fade-out 500ms forwards;

Combined entrance + exit → 
both

入场+退场组合动画 → 使用
both

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

/* or */
animation: fade-in-out 2s both;
css
animation:
  fade-in 1s backwards,
  fade-out 500ms calc(var(--ef-duration) - 500ms) forwards;

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

Development Mode Validation

开发模式验证

The system warns in the browser console about missing fill-mode on any element:
🎬 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.
系统会在浏览器控制台中针对未设置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.

Technical Background

技术背景

  • none
    (default): No styles applied before/after animation
  • forwards
    : Final keyframe styles persist after animation ends
  • backwards
    : Initial keyframe styles applied before animation starts (covers delays)
  • both
    : Combination
Editframe controls 
animation.currentTime
directly. Without fill-mode, browsers apply natural element styles instead of keyframe styles, causing visible "flashing."
  • none
    （默认值）：动画前后不应用任何样式
  • forwards
    ：动画结束后保留最终关键帧样式
  • backwards
    ：动画开始前应用初始关键帧样式（覆盖延迟期间的状态）
  • both
    ：同时包含
    forwards
    和
    backwards
    的效果
Editframe直接控制
animation.currentTime
。如果没有设置fill-mode，浏览器会应用元素的默认样式而非关键帧样式，从而导致可见的“闪烁”问题。

Resources

参考资源