CSS 动画演示与生成
28 个手写关键帧动画（淡入、四向滑入、缩放、旋转、弹跳、抖动、脉冲、闪烁、摇摆、心跳、翻转、波纹、打字机、骨架屏、加载转圈、进度条、渐变流动、悬浮卡片等），可调时长 / 延迟 / 缓动 / 循环 / 方向 / 填充模式，点击播放预览并输出 @keyframes 与 animation 简写。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
点击播放会重新开始动画，方便反复观察缓动效果
uk-fade-in 600ms ease-out 0ms 1 normal both动画库
28 个手写关键帧动画，点一下即可预览
动画参数
CSS 代码
包含 @keyframes 与使用它的类，可直接复制
@keyframes uk-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.uk-animated {
animation: uk-fade-in 600ms ease-out 0ms 1 normal both;
}复制 · 包含 @keyframes 与使用它的类，可直接复制
这个工具能做什么
- 需要给按钮、卡片、弹窗加一段入场动画时，先在 28 个手写关键帧里挑一个，调好时长和缓动，再把生成好的 CSS 整段贴进项目。
- 对齐团队里的动效参数：时长、延迟、缓动、循环次数、播放方向、填充模式都在同一处设置，导出的 `animation` 简写不会漏字段。
- 排查动画不生效的问题：把 @keyframes 单独拿出来对比，确认是名字写错、fill-mode 不对，还是循环次数为 0。
- 教学或写文档时需要一个能立刻重播的预览，观察 linear 与 ease-out 的差别。
示例
输入
动画：淡入（fade-in），时长 600ms，延迟 0ms，缓动 ease-out，循环 1 次，方向 normal，填充 both
输出
@keyframes uk-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.uk-animated {
animation: uk-fade-in 600ms ease-out 0ms 1 normal both;
}关键帧名字统一带 uk- 前缀，直接贴进项目不会和已有动画重名；填充模式 both 让动画开始前和结束后都保持首末帧样式。
常见问题
生成的 @keyframes 名字为什么带 uk- 前缀？
为了避免和你项目里已有的动画重名。动画名是全局的，两个同名的 @keyframes 会互相覆盖，加前缀后可以直接粘贴使用；不喜欢的话改成自己的名字即可，记得同时改 animation 简写里的第一段。
为什么动画播完就跳回原样了？
多半是填充模式选了 none。默认的 both 会在动画开始前套用 0% 的样式、结束后保留 100% 的样式；如果你只想要结束后保持，选 forwards 就够了。
animation 简写里的 0ms 能省略吗？
能，但建议留着。简写中第一个时间值是时长、第二个是延迟，只写一个时间时延迟默认为 0；显式写出 `600ms ease-out 0ms` 可以避免以后改参数时把延迟和时长搞混。
时长和循环次数有什么限制？
时长必须在 1–60000 毫秒之间，循环次数是 1–1000 的整数或无限循环。参数超出范围时工具会直接报错而不是生成一段浏览器会忽略的 CSS。
这些动画可以商用吗，会不会联网加载？
28 个关键帧全部是这个页面手写的，没有引入 animate.css 之类的第三方库，也没有任何网络请求，复制走的代码就是最终代码。
关键词：cssanimationkeyframesanimate动画关键帧过渡缓动前端动效animation generator