动态效果
动画简写、持续时间值和缓动曲线。
本页内容
类
| 类 | 声明 |
|---|---|
animate-<animation> | animation: var(--animate-<animation>); |
animation-<duration> | animation-duration: var(--duration-<duration>); |
transition-<duration> | transition-duration: var(--duration-<duration>); |
animation-delay-<duration> | animation-delay: var(--duration-<duration>); |
transition-delay-<duration> | transition-delay: var(--duration-<duration>); |
animation-<easing> | animation-timing-function: var(--easing-<easing>); |
transition-<easing> | transition-timing-function: var(--easing-<easing>); |
animation- 和 transition- 前缀都同时读取 duration 和 easing 命名空间。自定义键必须在两个命名空间之间保持不同，否则相同的键会产生歧义。animate- 读取的则是完整动画简写。
值
十个动画令牌包含关键帧名称，并会无限重复。七个持续时间提供时间长度，九条缓动曲线将时间进度映射为值进度。视觉比较只播放一次，初始状态为暂停，并遵循减少动态效果偏好。
动画
| 类 | 值 |
|---|---|
animate-fade | fade 1s infinite |
animate-flash | flash 1s infinite |
animate-float | float 3s ease-in-out infinite |
animate-heart | heart 1s infinite |
animate-jump | jump 1s infinite |
animate-ping | ping 1s infinite |
animate-pulse | pulse 1s infinite |
animate-rotate | rotate 1s linear infinite |
animate-shake | shake 1s infinite |
animate-zoom | zoom 1s infinite |
比较全部动画
持续时间
| 类 | 值 |
|---|---|
transition-fastest | 75ms |
transition-faster | .1s |
transition-fast | .15s |
transition-normal | .2s |
transition-slow | .3s |
transition-slower | .5s |
transition-slowest | .8s |
比较全部持续时间
缓动
| 类 | 值 |
|---|---|
transition-smooth | cubic-bezier(.4, 0, .2, 1) |
transition-soft | cubic-bezier(.33, 1, .68, 1) |
transition-crisp | cubic-bezier(.16, 1, .3, 1) |
transition-snap | cubic-bezier(.2, 0, 0, 1) |
transition-accelerate | cubic-bezier(.4, 0, 1, 1) |
transition-decelerate | cubic-bezier(0, 0, .2, 1) |
transition-overshoot | cubic-bezier(.34, 1.56, .64, 1) |
transition-rewind | cubic-bezier(.36, 0, .66, -.56) |
transition-spring | cubic-bezier(.68, -.6, .32, 1.6) |
比较全部缓动曲线
覆盖动画的一个部分
animate-pulse 设置完整的 animation 简写，包括 1s 的持续时间。条件相同时，animation-slow 排在简写之后，将持续时间替换为 300ms。关键帧名称与迭代次数保持不变；调整 class 属性中的顺序也不会改变结果。
持续时间类改变时间设置，但保留相同关键帧
两者使用相同的 pulse 关键帧。长条测量的是一次迭代的持续时间，不是动画进度或渲染速度。预设会重复播放，这个比较则单独呈现一次迭代。
文字说明
- animate-pulse 简写提供 pulse 1s infinite，每次迭代的持续时间为一秒。
- 条件相同时，animation-slow 排在 animate-pulse 之后，只将持续时间替换为 var(--duration-slow)，也就是 300ms。pulse 关键帧与无限迭代次数保持不变。
- 两条水平长条都从零开始，在同一条毫秒轴上呈现 1000:300 的长度比例。它们测量的是声明的单次迭代持续时间，不是性能，也不是形状移动的距离。
- 预设的 pulse 令牌会无限重复。需要只播放一次时，请添加原生迭代次数或定义自定义令牌；调整类名顺序不会改变生成规则顺序。
使用持续时间或缓动族调整其中一个部分，或用它们的变量组成自定义动画令牌。(animation-duration:450ms) 这类显式原生声明可以提供字面值覆盖。两条长条以相同时间尺度呈现一次迭代，并非比较渲染性能。
动画令牌会保留其值所引用的关键帧。单独的持续时间或缓动类不会指定动画名称。过渡也需要属性值发生变化；transition-fast 提供的是持续时间，不是 hover 状态或属性列表。
延迟改变的是效果开始时间，不会延长持续时间。缓动改变持续时间内的进度。控制点超出垂直 0–1 范围的曲线可能产生超出端点或回退的效果；不过动画属性本身仍可能限制实际渲染的值。
请为非必要的动态效果加上 @motion-safe 条件。要让预设动画只播放一次，请在相同条件下添加 (animation-iteration-count:1)。为组件组合入场动画的方法，见主题指南；捕获页面状态之间的过渡，则由视图过渡指南说明。
用法
允许动态效果时，为链接 hover 后的背景变化添加缓动。链接会返回值对照表。
<a href="#values" class="… (transition-property:background-color) transition-fast@motion-safe transition-smooth@motion-safe bg-surface-inset:hover">View motion values</a>生成的 CSS
@layer theme { :root, :host { --color-zinc-5: oklch(96.5% .0011 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100)) } :root, :host { --duration-fast: .15s; --easing-smooth: cubic-bezier(.4, 0, .2, 1) }}@layer utilities { .\(transition-property\:background-color\) { transition-property: background-color } .bg-surface-inset\:hover:hover { background-color: var(--color-surface-inset) } @media (prefers-reduced-motion: no-preference) { .transition-fast\@motion-safe { transition-duration: var(--duration-fast) } } @media (prefers-reduced-motion: no-preference) { .transition-smooth\@motion-safe { transition-timing-function: var(--easing-smooth) } }}自定义
用持续时间和缓动令牌组成动画，并在原生 CSS 中声明关键帧：--animate-reveal 会创建 animate-reveal。
@theme { --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both;}@keyframes reveal { from { opacity: 0; translate: 0 .5rem; }}生成的 CSS
@keyframes reveal { from { opacity: 0; translate: 0 .5rem; }}@layer theme { :root, :host { --duration-slow: .3s; --easing-crisp: cubic-bezier(.16, 1, .3, 1) } :root, :host { --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both }}@layer utilities { @media (prefers-reduced-motion: no-preference) { .animate-reveal\@motion-safe { animation: var(--animate-reveal) } }}