CSS 动画生成

怎么用

1. 从五个预设里选一个：淡入、滑入、缩放、旋转、弹跳。
2. 设定时长（毫秒），需要的话再加启动延迟。
3. 挑缓动曲线 —— 带回弹的 cubic-bezier 能让入场动画更生动。
4. 选迭代次数：一次到无限循环。
5. 点 Play 看预览按当前参数重新播放，然后复制生成的 CSS。

常见用法

• 微交互 —— 提示框、Toast、卡片入场的快速淡入与滑入。
• 加载状态 —— 循环的弹跳或缩放，配合骨架屏占位。
• 学 keyframes 语法 —— 对照百分比关键帧和你看到的运动效果。
• 提交前先试参数 —— 在真实元素上试时间组合，而不是凭感觉猜数值。

常见问题

问：预设用了哪些动画属性？ 答：只有 opacity 和 transform，这两个属性不会触发布局重排，生成的动画在普通设备上也能保持流畅。

问：keyframe 名字为什么是 demo-anim？ 答：预览用这个名字注入关键帧。复制出来的 CSS 里可以按项目习惯改名，只要 keyframes 规则和 animation 属性里的名字保持一致即可。

问：能组合多个预设吗？ 答：本工具内不能直接组合，但生成的就是普通 CSS —— 把两个预设的关键帧按不同百分比段合并进同一条 keyframes 规则即可实现。