核心特点

1. 开箱即用的动画效果
   • 提供 80+ 种预定义动画，涵盖常见场景（如 fadeIn、bounce、slideIn）。
   • 分类清晰：基础动画（Fading、Bouncing）、Attention Seekers（闪烁、摇摆）、变形动画（旋转、缩放）等。
2. 极简集成方式
   • 通过 CDN 引入或 npm 安装，通过添加类名（如 animate__animated animate__bounce）应用动画。
   html

   预览

   <div class="animate__animated animate__bounce">Hello World!</div>
   

3. 自定义配置
   • 通过 CSS 变量或自定义类调整动画持续时间、延迟、速度曲线等。
   html

   预览

   <div class="animate__animated animate__bounce" style="--animate-duration: 2s;">
     更长的动画持续时间
   </div>
   
4. 响应式设计支持
   • 动画效果自动适配元素尺寸，无需额外调整。
5. 与其他框架兼容
   • 可与 React、Vue、Angular 等框架集成，通过状态管理控制动画触发。

典型应用场景

1. 页面加载动画
   • 元素进入视口时的淡入效果（如 animate__fadeIn）。
2. 交互反馈
   • 按钮点击时的微动画（如 animate__pulse）、表单验证状态提示。
3. 导航与菜单
   • 下拉菜单展开 / 收起的平滑过渡（如 animate__slideDown）。
4. 数据可视化
   • 图表加载时的动画效果（如柱状图逐列升起）。
5. 强调内容
   • 限时促销、重要通知的闪烁提示（如 animate__flash）。

基本使用流程

1. 引入库文件
   html

   预览

   <link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet">
   
2. 应用动画类
   html

   预览

   <button class="animate__animated animate__shakeX">点击我</button>
   
3. 组合动画（可选）
   html

   预览

   <div id="element" class="animate__animated">
     动态添加动画类
   </div>
   
   <script>
     const element = document.getElementById('element');
     element.classList.add('animate__bounce');
   </script>
   

高级用法

1. 自定义动画参数
   html

   预览

   <div class="animate__animated animate__backInDown" style="
     --animate-duration: 1s;
     --animate-delay: 0.5s;
     --animate-repeat: 2;
   ">自定义参数的动画</div>
   
2. 与 JavaScript 结合触发动画
   javascript

   function triggerAnimation() {
     const element = document.querySelector('.target');
     element.classList.add('animate__animated', 'animate__fadeOut');
     
     // 动画结束后重置
     element.addEventListener('animationend', () => {
       element.classList.remove('animate__fadeOut');
     });
   }
   
3. 使用动画延迟类
   html

   预览

   <div class="animate__animated animate__fadeIn animate__delay-1s">延迟1秒</div>
   <div class="animate__animated animate__fadeIn animate__delay-2s">延迟2秒</div>
   

优缺点对比

替代方案

• Tailwind CSS Animations：基于 Tailwind 的动画工具类，更灵活。
• GSAP：专业级动画库，支持复杂交互和高性能动画。
• CSS Transition：原生 CSS 过渡，适合简单效果。

总结