首页 › 前端工具 › CSS动画
CA

CSS动画

可视化调整animation动画类型、时长、播放次数和缓动函数

功能CSS 动画生成器
动画类型弹跳 / 淡入 / 旋转 / 脉冲 / 滑动
输出实时预览 + CSS 代码
动画预览
生成的 CSS 代码0 字符
动画类型bounce
时长1s
次数infinite

CSS 动画生成器说明

CSS 动画通过 @keyframes 定义关键帧,再用 animation 属性引用。由动画名称、时长、缓动函数、播放次数等参数组成。

动画类型:弹跳(bounce)模拟自由落体回弹;淡入(fade)控制透明度变化;旋转(rotate)围绕中心轴旋转;脉冲(pulse)缩放呼吸效果;滑动(slide)水平位移。

使用场景:加载动画、按钮悬停、入场效果、数据刷新提示等。animation-iteration-count 设为 infinite 可无限循环。

前端工具