CSS3 动画生成器
W3School 参考 →一、Keyframes 动画
0%{background:#f00;}
30%{background:#ff0;}
100%{background:#00f;}
animation-name
规定 @keyframes 动画的名称。
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
timing-function
规定动画的速度曲线。默认是 "ease"。（linear | ease | ease-in | ease-out | ease-in-out）
animation-delay
规定动画何时开始。默认是 0。
iteration-count
（数字 | infinite:无限播放）规定动画被播放的次数。默认是 1。
direction
(normal|alternate) 规定动画是否在下一周期逆向地播放。默认是 "normal"。
play-state
(paused|running)规定动画是否正在运行或暂停。默认是 "running"。
fill-mode
(none | forwards | backwards | both) 规定对象动画时间之外的状态。
👁️ 实时预览 iframe 隔离
二、Transition 动画
类名
生成的 CSS 类名。
过渡时间
规定过渡完成所花费的秒或毫秒。例如 .5s 或 300ms。
速度曲线
规定过渡的速度曲线。默认是 "ease"。（linear | ease | ease-in | ease-out | ease-in-out ）
过渡属性
变化项（比如颜色、高度的变化），多个属性用逗号分隔。
👁️ 实时预览 iframe 隔离
鼠标悬停下方区域查看过渡
CSS3 动画生成工具 · Bootstrap 5 + jQuery 4 · 实时 iframe 预览