✨
CSS 动画预设库
弹跳、抖动、淡入、心跳等常用入场/强调动画，预览并复制 keyframes 代码。
本地处理 · 不上传
加载工具中…
相关：animation · 动画 · 预设 · bounce · shake · css
CSS 动画预设库收录淡入、滑入、缩放、抖动等常用动效，可直接预览并复制关键帧代码，不必引入整个动画库。
使用步骤
- 浏览分类查看动效
- 点击预览效果
- 调整时长与延迟
- 复制需要的关键帧代码
使用场景
- 为元素添加入场动画
- 制作表单校验失败的抖动提示
- 做列表项的逐个出现效果
- 替代引入完整动画库
小贴士
- 只取需要的几个动画比引入整个动画库划算得多——库通常有几十 KB，而单个关键帧只有几行。
- 列表逐个出现时给每项加递增的 animation-delay，间隔 50 到 80 毫秒即可，太长会显得拖沓。
- 务必在 `prefers-reduced-motion` 媒体查询中关闭非必要动画，这对前庭敏感的用户是实实在在的健康问题。
常见问题
和引入动画库比有什么优势？
体积。动画库通常包含上百个动效但项目实际只用三五个，直接复制需要的关键帧能省下绝大部分体积，也不必处理版本升级。
怎么做列表的逐个出现？
给每一项设置递增的 animation-delay，可用 CSS 变量或 nth-child 实现。间隔 50 到 80 毫秒之间效果最自然。
要照顾无障碍吗？
要。在 `@media (prefers-reduced-motion: reduce)` 中把动画时长设为极短或直接关闭。前庭功能障碍者会因大幅动效产生眩晕与不适。
CSS 动画预设库是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 动画预设库，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。