0% (起始帧)
translateXpx
translateYpx
rotatedeg
scale
opacity
100% (结束帧)
translateXpx
translateYpx
rotatedeg
scale
opacity
动画参数
时长s
缓动
延迟s
循环
方向
填充
实时预览
CSS 代码
常见问题 FAQ
CSS关键帧动画生成器是什么?
一个在线可视化工具,帮助开发者通过界面操作创建CSS @keyframes动画,无需手写代码。支持添加关键帧、设置CSS属性、配置动画参数,并实时预览效果。
支持哪些CSS动画属性?
支持transform(translate、rotate、scale、skew)、opacity、background-color、border-radius等常用可动画CSS属性。动画参数支持duration、timing-function、delay、iteration-count、direction、fill-mode。
生成的代码兼容性如何?
生成的CSS动画代码兼容所有现代浏览器(Chrome、Firefox、Safari、Edge)。如需兼容旧浏览器,可手动添加-webkit-前缀。
数据会上传到服务器吗?
不会。所有动画编辑和代码生成都在浏览器本地完成,不上传任何数据。