css元素动画效果怎么快速添加_使用Animate.css关键帧预设实现
引入 Animate.css 可通过 CDN 添加 animate__animated 与具体效果类实现动画，如按钮弹跳；支持通过样式控制重复、延迟、速度，结合 JS 动态触发更佳。
直接引入 Animate.css 库
，给元素添加对应类名就能快速实现专业级 CSS 动画，无需手写 keyframes。
1. 引入 Animate.css 文件
最简单方式是通过 CDN 引入（推荐最新版 v4+）：
注意：v4 开始需手动添加 animate__animated 基础类，否则动画不生效。
2. 基本用法：两步触发动画
给目标元素同时加上两个类：
- animate__animated —— 必须加，是动画启用开关
- animate__bounce、animate__fadeInUp 等具体效果类 —— 选一个
例如让按钮点击时弹跳：
3. 控制动画行为（进阶实用）
默认动画只执行一次、无延迟、立即开始。可通过内联样式或额外类微调：
- 重复播放：style="animation-iteration-count: infinite;"
- 延迟 1 秒开始：style="animation-delay: 1s;"
- 慢速播放（2 倍时长）：style="animation-duration: 2s;"
- 鼠标悬停才动：用 .my-btn:hover 组合类，配合 JS 切换类更灵活
4. 配合 JavaScript 动态触发（推荐场景）
避免页面一加载就播，常用 JS 控制“出现时动”或“交互后动”：
比如滚动到区域再动画：
element.classList.add('animate__animated', 'animate__slideInLeft');
为防重复添加，可先移除再加，或用 classList.toggle() 控制开关。
基本上就这些。Animate.css 把复杂 keyframes 封装成语义化类名，省时、易读、兼容好，适合快速原型和中小型项目。
