不能直接混用，因Bootstrap的fade依赖opacity+transition+JS控制显隐，而Animate.css是纯CSS关键帧动画，需元素可见且手动增删类；混用会导致样式冲突、动画失效或元素不可见。
Bootstrap 的 fade 类和 Animate.css 的 animate__bounce 能直接混用吗？
不能直接混用，因为两者动画机制冲突：Bootstrap 的 fade 依赖 opacity + transition + JavaScript 控制显示/隐藏状态；Animate.css 是纯 CSS 关键帧动画，靠添加/移除 animate__animated 和具体效果类（如 animate__fadeIn）触发。强行叠加会导致样式覆盖、动画中断或元素不可见。
- Bootstrap 的
fade默认配合show类控制显隐，且会设置display: none—— 这会让 Animate.css 的关键帧动画失效（display: none下不渲染动画） - Animate.css 的动画类必须作用在可见元素上，且推荐用 JavaScript 手动增删（比如点击后加
animate__fadeIn），而不是靠 Bootstrap 的 show/hide 逻辑 - 如果要用 Bootstrap 的组件（如
modal或collapse），想加 Animate.css 效果，得监听其事件（如shown.bs.modal），再手动加 Animate.css 类
怎么让按钮点击后弹出带 animate__zoomIn 效果的提示框？
别依赖 Bootstrap 的 fade 或 slide 过渡，改用 Animate.css 主导，Bootstrap 只负责结构和基础交互。
- 提示框容器用
<div class="alert">即可，不要加fade或show - 初始状态设为
style="display: none;"，避免闪现；或者用class="d-none"（Bootstrap 5 工具类） - 点击按钮时，先
element.classList.remove("d-none")让它可见，再用setTimeout延迟 10ms 后添加animate__animated animate__zoomIn—— 这是为了触发重排（reflow），确保浏览器“看到”元素已存在再启动动画 - 动画结束后记得清理类：
element.addEventListener("animationend", () => { element.classList.remove("animate__animated", "animate__zoomIn"); })
animate__slow 和 animate__faster 在不同设备上表现不稳定？
是的，Animate.css 的速度修饰类（animate__slow、animate__fast 等）只改 animation-duration，但实际持续时间还受父元素 transform、GPU 加速状态、甚至 iOS Safari 的动画节流影响。
- 移动端（尤其 iOS）对非
transform+opacity的属性动画（比如height、margin）会降帧甚至跳过，所以别用animate__slideInUp去动一个没设transform: translateZ(0)的块级元素 -
animate__slow在某些安卓 WebView 中可能被忽略——建议直接写内联 style 覆盖：style="animation-duration: 1.5s;" - 如果动画卡顿，优先检查是否触发了 Layout（布局重排）：避免在动画中读写
offsetHeight、getComputedStyle等，也别在动画期间动态改width/height
为什么加了 animate__lightSpeedIn 却没反应？
大概率是漏了必需的基础类，或者被其他 CSS 干扰了 animation 属性。
立即学习“前端免费学习笔记（深入）”；
- Animate.css v4+ 强制要求同时存在
animate__animated和效果类（如animate__lightSpeedIn），缺一不可 - 检查是否被 Bootstrap 的
.fade类覆盖：它的transition会干扰animation，删掉所有fade、show相关类 - 确认元素不是
visibility: hidden或opacity: 0初始状态——Animate.css 大部分入场动画需要从“不可见但占位”开始，推荐用style="visibility: hidden; opacity: 0;"初始化，再通过 JS 移除这些 inline style 并加动画类 - 如果用了 Webpack/Vite，确认 Animate.css 已正确 import：
@import 'animate.css/animate.min.css';，而不是只引入了 JS 文件
