CSS 动画 Animate.css的使用及WOW.js插件

啦工作呢

1277人浏览 · 2025-08-04 11:14:57

啦工作呢 · 2025-08-04 11:14:57 发布

Animate.css 使用总结笔记

1. 简介

Animate.css 是一个基于 CSS3 的动画库，提供多种预设动画效果（如淡入、弹跳、滑动等），兼容性好，使用简单。

官网地址：
👉https://animate.style/

2. 使用方式

（1）引入 CSS 文件

通过 CDN 引入（推荐）：

html

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

或下载后本地引入：

html

<link rel="stylesheet" href="animate.min.css" />

（2）基本用法

结构：

html

<div class="animate__animated animate__动画名称">内容</div>

示例：

html

<div class="animate__animated animate__fadeInLeft">从左侧淡入</div>
<div class="animate__animated animate__bounce">弹跳效果</div>

✅ 关键点：

animate__animated：必须添加，用于启用动画。
animate__动画名称：指定具体的动画效果（如 fadeInLeft、bounce）。

3. 常用动画类名

（1）入场动画（Entrance）

类名	效果
`animate__fadeIn`	淡入
`animate__fadeInLeft`	从左侧淡入
`animate__fadeInRight`	从右侧淡入
`animate__fadeInUp`	从下方淡入
`animate__zoomIn`	放大进入
`animate__bounceIn`	弹跳进入
`animate__slideInLeft`	从左侧滑入
`animate__rotateIn`	旋转进入

（2）出场动画（Exit）

类名	效果
`animate__fadeOut`	淡出
`animate__fadeOutLeft`	向左淡出
`animate__fadeOutRight`	向右淡出
`animate__zoomOut`	缩小退出
`animate__bounceOut`	弹跳退出
`animate__slideOutDown`	向下滑出

（3）其他特效

类名	效果
`animate__pulse`	脉冲效果
`animate__shake`	摇晃效果
`animate__swing`	摇摆效果
`animate__spin`	旋转效果

4. 控制动画属性

（1）调整动画时间

类名	说明
`animate__slow`	2s
`animate__slower`	3s
`animate__fast`	800ms
`animate__faster`	500ms
默认	1s

示例：

html

<div class="animate__animated animate__fadeIn animate__fast">快速淡入</div>

（2）延迟动画

类名	说明
`animate__delay-1s`	延迟 1s
`animate__delay-2s`	延迟 2s
`animate__delay-3s`	延迟 3s

示例：

html

<div class="animate__animated animate__fadeIn animate__delay-2s">延迟 2s 淡入</div>

（3）重复动画

类名	说明
`animate__repeat-1`	重复 1 次
`animate__repeat-2`	重复 2 次
`animate__infinite`	无限循环

示例：

html

<div class="animate__animated animate__pulse animate__infinite">无限脉冲</div>

5. WOW.js 插件

WOW.js 是一个滚动动画库，可以让元素在滚动到视口时触发 Animate.css 动画。

效果参考：WOW.js演示_dowebok
使用参考：WOW.js – 让页面滚动更有趣 - Cuckoo_H - 博客园

（1）引入文件

html

<!-- 先引入 Animate.css -->
<link rel="stylesheet" href="animate.min.css" />
<!-- 再引入 WOW.js -->
<script src="wow.min.js"></script>

（2）初始化

html

<script type="text/javascript">
    new WOW().init();
</script>

（3）基本用法

html

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-iteration="1">hello</div>

✅ 关键点：

使用 wow 类代替 animate__animated
直接使用动画名称（如 slideInLeft），不需要 animate__ 前缀
通过 data 属性控制动画参数

（4）配置参数

属性	说明	示例
data-wow-duration	动画执行时间	data-wow-duration="2s"
data-wow-delay	动画延迟时间	data-wow-delay="5s"
data-wow-iteration	动画重复次数	data-wow-iteration="3"
data-wow-offset	触发动画的偏移值	data-wow-offset="100"

（5）自定义配置

javascript

new WOW({
  boxClass: 'wow',      // 默认类名
  animateClass: 'animated', // 动画类名
  offset: 0,          // 触发距离
  mobile: true,       // 是否在移动设备启用
  live: true          // 是否实时检查新元素
}).init();

6. 自定义动画时间（CSS 变量）

css

:root {
  --animate-duration: 0.5s; /* 全局动画时间 */
  --animate-delay: 0.3s;   /* 全局延迟时间 */
}

7. 动态控制（JavaScript）

javascript

const box = document.querySelector('.box');

// 添加动画
box.classList.add('animate__animated', 'animate__bounce');

// 动画结束后移除类
box.addEventListener('animationend', () => {
  box.classList.remove('animate__animated', 'animate__bounce');
});