CSS 动画生成器

什么是 CSS animation 属性？

CSS animation 属性是一个简写属性，允许您在无需 JavaScript 的情况下将元素从一种样式动画到另一种样式。它结合了 animation-name（使用的关键帧规则）、animation-duration（一个周期多长）、animation-timing-function（加速度曲线）、animation-delay、animation-iteration-count（重复多少次）、animation-direction 和 animation-fill-mode。只需几行 CSS，您就可以创建旋转、脉冲、弹跳、淡入淡出和滑动等动画，完全在浏览器中运行。

当动画使用 transform 和 opacity 时，它们是 GPU 加速的，因此流畅且高性能。它们是重复装饰性运动的推荐方法，因为不需要 JavaScript，只需简单的 CSS 更改即可暂停、反转或循环。

动画属性详解

CSS animation 简写属性接受多个子属性。了解每个属性有助于构建所需的精确运动：

本工具暴露了最重要的四个属性。完整简写还包括 delay、direction、fill-mode 和 play-state，您可以在复制生成的代码后手动添加。

关键帧和缓动函数

CSS 动画由 @keyframes 规则驱动，该规则定义了时间线上各点的样式。例如，@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 将元素旋转一整圈。您可以使用百分比停止点（0%、50%、100%）创建更复杂的多阶段动画，如先向上移动再向下移动的弹跳。

timing-function 控制动画在每个周期内的进度。linear 以恒定速度移动。ease 开始慢、加速、然后减速。ease-in 开始慢并加速。ease-out 开始快并减速。ease-in-out 两端都慢。要获得自然的感觉，ease 或 ease-in-out 通常是最佳选择；对于加载旋转器，首选 linear 以使旋转看起来稳定。

何时使用 CSS 动画

CSS 动画非常适合任何不需要复杂序列逻辑的重复装饰性运动。常见用例包括：持续旋转的加载旋转器、吸引注意力的脉冲按钮或徽章、趣味交互的弹跳图标、微妙过渡的元素淡入淡出，以及滑入视图的通知或提示。它们也用于页面加载时的入场动画，元素从初始状态动画到最终位置。

对于需要响应用户输入、在特定事件上启动或协调多个元素的动画，JavaScript 控制的过渡或 Web Animations API 可能更合适。但对于自运行、循环或一次性装饰性运动，CSS 动画更简单、更高性能，且不需要任何 JavaScript。

如何生成 CSS 动画

本工具让您可视化设计动画：选择关键帧预设（spin、pulse、bounce、fade 或 slide）、用滑块设置时长、从下拉菜单选择缓动函数、选择迭代次数。预览实时动画，让您看到效果，CSS 代码（包括 @keyframes 规则）自动生成。点击"复制 CSS"获取代码并粘贴到样式表。

所有操作都在浏览器中本地运行 — 不会向任何服务器发送数据，您的设计选择完全私密。