Elysia Tools
导航
Design
生成 CSS 动画关键帧和属性
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 动画生成器是一款高效的开发辅助工具，旨在帮助前端开发者快速生成符合标准的 CSS 关键帧（Keyframes）代码及相关动画属性，简化网页动态效果的实现过程。
背景
需要在页面加载时让标题平滑显示，以提升用户体验。
问题
手动编写关键帧代码容易出错且效率较低。
如何使用
选择 'fade' 动画类型，设置持续时间为 1 秒，填充模式为 'forwards'。
name: fadeIn, animationType: fade, duration: 1, timingFunction: ease, fillMode: forwards结果
获得了一段简洁的 CSS 代码，直接应用后实现了平滑的淡入效果。
背景
需要一个持续旋转的加载图标来提示用户数据正在处理。
问题
需要精确控制旋转动画的循环次数和速度曲线。
如何使用
选择 'rotate' 动画类型，设置迭代次数为 'infinite'，时间函数为 'linear'。
name: spin, animationType: rotate, duration: 2, timingFunction: linear, iterationCount: infinite结果
生成了匀速无限旋转的 CSS 关键帧，成功应用于加载组件。
是的，生成的代码是标准的 CSS 语法，可以直接应用于任何网页项目。
支持，你可以通过输入框自定义动画名称，以便在 CSS 中进行调用。
可以，在迭代次数选项中选择 'infinite' 即可实现无限循环效果。
目前支持淡入淡出、滑入、缩放、旋转和弹跳五种基础动画类型。
本工具生成的是标准的 CSS3 代码，现代浏览器均已良好支持。