什么是CSS动画生成器？
可视化创建CSS关键帧动画，无需手写代码。设置关键帧、选择缓动函数、调整持续时间和延迟，然后把CSS代码直接复制到项目中。适合按钮效果、加载动画、悬停效果和页面过渡。
从四十多个分门别类的现成动画里挑选——淡入淡出、滑动、缩放、旋转、弹跳、强调、退出和加载循环,或者从零开始自定义。每个关键帧可设置透明度、缩放、旋转、横向和纵向位移、X/Y 倾斜、模糊、圆角、盒阴影和背景色。已经有 @keyframes 代码?粘贴到导入对话框中,可视化编辑器会自动还原每一步。暂停预览后拖动红色滑块,可逐帧检查中间画面,导出的是标准 @keyframes CSS,可直接粘贴到任意样式表中。
使用方法
- 选择一个动画预设（淡入、滑动、弹跳、旋转）或从零开始在时间轴上添加关键帧。
- 调整每个关键帧的属性——变换、透明度、颜色、缩放——并微调缓动曲线、持续时间和重复次数。
- 实时预览动画效果，然后复制生成的CSS @keyframes代码或下载为.css文件。
何时使用
- 为页面首屏、模态框或卡片添加加载时的入场动画。
- 为按钮设计微交互,比如悬停时轻微放大,或表单出错时震动提醒。
- 在接入框架之前,先用它快速搭建加载转圈和骨架屏效果原型。
结果
一位前端开发者需要为作品集页面的卡片制作平滑的入场动画。他设置了一个0.6秒ease-out的动画，从下方20px处淡入，复制CSS后为每张卡片设置了交错延迟。
常见问题
- CSS 动画(animation)和过渡(transition)有什么区别?
- transition 是由触发条件(悬停、聚焦、类名变更)驱动的一次性从 A 状态到 B 状态的变化。animation 基于 @keyframes 规则,可以包含任意多个中间步骤、循环播放,并在页面加载时自动开始,无需用户操作。
- 为什么动画播放一次后就消失了?
- 动画结束后元素会回到初始样式。把 animation-fill-mode 设为 forwards,最后一帧的样式就会保留下来;如果在延迟期间也要应用第一帧,改用 both。
- 选哪种缓动函数感觉最自然?
- 入场动画用 ease-out,收尾减速会让动作显得稳重。出场动画用 ease-in,效果相反。cubic-bezier(0.34, 1.56, 0.64, 1) 会有轻微回弹,看起来活泼但不夸张。
- 这些动画在旧浏览器上能正常运行吗?
- @keyframes 在 2013 年之后发布的所有浏览器中都直接支持,无需厂商前缀。如果非要兼容 IE 10 及以下版本才需要加 -webkit- 前缀,但这部分用户已经少到通常不值得为他们多写 CSS。
- 怎么让动画一直循环?
- 把迭代次数设为 infinite,再把方向设成 alternate,这样每播一次就反向一次,得到平滑的来回效果(适合脉冲、抖动这类动画),而不是直接跳回起点。