CSS 关键帧动画模板

功能

• 七套预设：淡入、向上滑入、弹出、脉动、抖动、旋转、上下浮动
• 时长 100–10000ms，缓动五选一
• 可选循环播放或只播一次
• 预览里循环播放，悬停暂停以便看清某一帧
• 自动附上 `prefers-reduced-motion` 的处理 —— 尊重系统的减少动态效果设置
• 动画名带随机后缀，不会与你项目里同名的关键帧互相覆盖
• 交付的代码含 `@keyframes` 与使用规则两部分，可直接粘走
• 下方代码带语法着色，复制按钮一步拿走
• 所有计算在浏览器本地完成

使用方法

1. 挑一套动画，预览会立刻开始循环播放
2. 调时长与缓动 —— 旋转记得用 linear，用缓动会看出「卡了一下」
3. 决定循环播放还是只播一次
4. 复制代码；记得同时收下那一段 `prefers-reduced-motion` 规则

常见问题

为什么代码里会自动加一段 `prefers-reduced-motion`？

因为动画会让人不适，这不是小事。前庭功能障碍（一种内耳问题）的用户会因为位移与缩放动画而眩晕、恶心，而操作系统里有一个开关就是给他们的：`prefers-reduced-motion`。加上那三行，这些用户在你这里就不会难受 —— 成本是三行 CSS。这不是「可访问性加分项」，而是「别让人不舒服」的基本要求。

动画名后面为什么有一串随机字符？

因为 `@keyframes` 的名字是全局的。如果你项目里已经有一个叫 `fade-in` 的关键帧，你粘贴进来的这一段会覆盖它（或者被它覆盖）—— 表现是「某些地方动画变成了别的效果」，而且时有时无，极难排查。带一串随机后缀就不可能撞名。顺带它也解决另一个坑：改了参数之后浏览器会认为关键帧变了，从而重新播放动画。

无限循环的动画有什么问题？

两个。一是抢注意力：持续动的东西会不断把视线拉过去，如果它只是个装饰，「进行中」之外的场景都不该无限播。二是持续占用合成线程，在低端机与省电模式下会明显耗电。所以：加载指示器这类「状态就是动画本身」的可以无限循环；而提示、装饰性的浮动，建议播一两次就停，或者用 `animation-iteration-count: 3` 之类限次。

入场动画怎么做成「依次出现」？

给每个元素加一点递增的 `animation-delay`：第一个 0ms、第二个 80ms、第三个 160ms……注意两点：一是总数别超过五六项（再多的话排在后面的元素等太久，用户已经移开视线了）；二是延迟期间元素会保持起始状态（也就是透明或位移），如果你不希望它「先出现再跳」，记得配 `animation-fill-mode: backwards`。