✨CSS 动画生成器

怎么用 CSS 动画生成器

1. 先挑一个动效预设，或者点“添加关键帧”，把它放在时间轴上任意百分比处。
2. 选中某个关键帧，设置位移、缩放、旋转、倾斜、透明度和背景色；右侧调整时长、延迟、次数和缓动。
3. 把生成的 @keyframes 和类名复制到样式表里就能直接用。

常见问题

怎么做自定义缓动曲线？

把缓动选成“自定义贝塞尔曲线”，然后拖动曲线上的两个控制点，工具会写出精确的 cubic-bezier(x1, y1, x2, y2)，控制点超过 1 时还能做出回弹效果。

动画在页面上不生效怎么办？

检查元素是否加上了生成的类名、是否被 display: none 隐藏，以及 animation-fill-mode；设为 both 时，延迟期间保持第一帧，结束后保持最后一帧。

可以同时动画颜色和变换吗？

可以。勾选“同时动画背景色”，每个关键帧会额外输出 background-color，浏览器会和 transform 一起插值。