CSS 动画示例库

收录淡入(fadeIn)、上滑(slideUp)、脉冲(pulse)、旋转(spin)、弹跳(bounce)、抖动(shake)等常用 CSS 动画的完整 @keyframes 代码,输入关键字即可筛选并复制使用。全部在浏览器本地完成。

动画查询 等待输入

输入动画名称或关键字,留空则列出全部动画。

生成结果
收录动画—
当前结果—
输入关键字后点击查询,动画代码将显示在这里。

代码为标准 @keyframes 写法;结果仅供参考。

使用说明
  • @keyframes 定义动画关键帧,通过 animation 属性调用。
  • 淡入通过改变 opacity 实现。
  • 上滑通过改变 transform: translateY() 实现。
  • 旋转使用 transform: rotate(),脉冲使用 scale()。
  • 弹跳与抖动通过多关键帧组合位移或旋转实现。