Animate.css 预定义动画

<!-- 引入 CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <!-- 使用：两个类缺一不可 --> <h1 class="animate__animated animate__bounce"> 弹跳的标题 </h1> // 规则： // 1. 必须添加 animate__animated 基础类 // 2. 再添加具体的动画类（带 animate__ 前缀）

// 常用注意力动画： animate__bounce // 弹跳 animate__flash // 闪烁 animate__pulse // 脉冲 animate__rubberBand // 橡皮筋 animate__shakeX // 水平摇动 animate__shakeY // 垂直摇动 animate__swing // 摇摆 animate__tada // 庆祝 animate__wobble // 摆动 animate__jello // 果冻 animate__heartBeat // 心跳

// 常用淡入动画： animate__fadeIn // 淡入 animate__fadeInDown // 从上方淡入 animate__fadeInUp // 从下方淡入 animate__fadeInLeft // 从左侧淡入 animate__fadeInRight // 从右侧淡入 animate__fadeInDownBig // 从远处上方淡入（位移更大） animate__fadeInTopLeft // 从左上角淡入 animate__fadeInTopRight // 从右上角淡入

// 滑动入场动画： animate__slideInDown // 从顶部滑入 animate__slideInUp // 从底部滑入 animate__slideInLeft // 从左侧滑入 animate__slideInRight // 从右侧滑入 // 滑动出场动画： animate__slideOutDown // 向底部滑出 animate__slideOutUp // 向顶部滑出 animate__slideOutLeft // 向左侧滑出 animate__slideOutRight // 向右侧滑出

// 缩放动画： animate__zoomIn // 放大进入 animate__zoomInDown // 从上方放大进入 animate__zoomInUp // 从下方放大进入 animate__zoomInLeft // 从左侧放大进入 animate__zoomInRight // 从右侧放大进入 animate__zoomOut // 缩小退出 animate__zoomOutDown // 向下方缩小退出 animate__zoomOutUp // 向上方缩小退出

// 翻转动画： animate__flip // 翻转 animate__flipInX // 水平翻转进入 animate__flipInY // 垂直翻转进入 animate__flipOutX // 水平翻转退出 animate__flipOutY // 垂直翻转退出

// 旋转入场： animate__rotateIn // 旋转进入 animate__rotateInDownLeft // 从左下角旋转进入 animate__rotateInDownRight // 从右下角旋转进入 animate__rotateInUpLeft // 从左上角旋转进入 animate__rotateInUpRight // 从右上角旋转进入 // 旋转出场： animate__rotateOut // 旋转退出 animate__rotateOutDownLeft // 向左下角旋转退出 animate__rotateOutDownRight // 向右下角旋转退出 animate__rotateOutUpLeft // 向左上角旋转退出 animate__rotateOutUpRight // 向右上角旋转退出

// 速度类（控制持续时间）： animate__slow // 2s animate__slower // 3s animate__fast // 800ms animate__faster // 500ms // 延迟类： animate__delay-2s // 延迟 2s animate__delay-3s // 延迟 3s animate__delay-4s // 延迟 4s animate__delay-5s // 延迟 5s // 重复类： animate__repeat-1 // 重复 1 次 animate__repeat-2 // 重复 2 次 animate__repeat-3 // 重复 3 次 animate__infinite // 无限循环 // 也可用 CSS 变量自定义： <div style="--animate-duration: 3s; --animate-delay: 1s;"> 自定义时长和延迟 </div>

/* 全局修改所有动画 */ :root { --animate-duration: 800ms; --animate-delay: 0.5s; } /* 局部修改某个元素 */ .custom-anim { --animate-duration: 3s; --animate-delay: 1s; --animate-repeat: 2; } <div class="animate__animated animate__fadeIn custom-anim"> 自定义参数动画 </div>

// 通过 JS 动态添加动画类 function playAnimation(animName) { const el = document.getElementById('demo-element'); // 先移除所有动画类 el.className = ''; // 触发重绘 void el.offsetWidth; // 重新添加动画类 el.classList.add('animate__animated', animName); } // 监听动画结束事件，可以串联动画 el.addEventListener('animationend', () => { console.log('动画结束'); });

/* 鼠标悬停触发动画 */ .btn-hover:hover { animation: pulse; animation-duration: 1s; } // 或使用 JS 添加动画类 btn.addEventListener('mouseenter', () => { btn.classList.add('animate__animated', 'animate__pulse'); btn.addEventListener('animationend', () => { btn.classList.remove('animate__animated', 'animate__pulse'); }, { once: true }); });