CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}关于本工具
CSS动画生成器通过配置关键帧预设、时间、持续时间、延迟和迭代设置来创建流畅的CSS动画。实时预览显示动画效果，可直接复制完整的@keyframes规则和animation简写。
使用transform和opacity属性的CSS动画在GPU上合成，不会触发布局或重绘，因此性能高效。
使用方法
- 从下拉菜单中选择动画类型。
- 设置持续时间（如0.5s、2s）。
- 选择控制缓动的时间函数。
- 可选设置动画开始前的延迟。
- 设置迭代次数（数字或infinite）。
- 点击重播预览，然后复制导出CSS。
使用场景
前端开发者使用淡入淡出和滑动动画提升内容加载时的感知性能。UI设计师原型化按钮脉冲、通知抖动等微交互。加载指示器使用旋转动画。
常见问题
- fill-mode: both是什么？ — 动画在开始前（考虑延迟）应用起始样式，结束后保持结束样式。这是最常用的设置。
- 如何让动画永远循环？ — 将迭代次数设置为infinite。
- CSS动画比JavaScript动画更好吗？ — 对于简单的声明式效果，CSS动画更受欢迎，因为浏览器可以优化它们。对于复杂的序列或交互性，JavaScript提供更多控制。