animate官网 · 让CSS动画回归标准化与纯粹

v4版本统一使用animate__前缀替代了v3的animated前缀，并引入了CSS自定义属性体系。v3使用animated作为基础类，v4改为animate__animated。如果你从v3迁移，需要把所有类名中的animated替换为animate__animated，动画类名也要加上animate__前缀。

最常见的原因是忘记同时添加animate__animated基础类。这个类负责设置animation-duration和animation-fill-mode，没有它动画不会执行。其次是CDN链接失效或类名拼写错误，建议用浏览器开发者工具检查元素的computed样式。另外，如果用户在系统中开启了“减少动态效果”，动画会被自动降级。

配合wow.js或AOS等滚动触发库时，动画在元素重新进入视口时会重播，这是CSS动画的预期行为。解决方案是监听animationend事件，在动画结束后移除动画类名。如果你使用wow.js，可以在初始化时设置resetAnimation为false，或在animationend回调中移除类名。

prefers-reduced-motion是CSS媒体查询特性，用于检测用户是否在操作系统中启用了“减少动态效果”。animate.css从v3.7.0开始自动支持，当用户开启该设置后，动画时长会被压缩至0.01ms。你不需要额外处理，但如果你使用了自定义动画类，建议也加上对应的降级规则。

有两种方式。第一种是叠加工具类：animate__slow（2s）、animate__slower（3s）、animate__fast（800ms）、animate__faster（500ms）。第二种是覆盖CSS变量：在元素的style属性或样式表中设置--animate-duration为任意时长。CSS变量的方式更灵活，适合在运行时动态调整。

可以。在React中，你可以在组件的className中直接添加动画类名，配合状态切换来控制动画的播放。在Vue中，可以用:class动态绑定类名。需要注意的是，React的StrictMode可能导致组件二次渲染时动画重播，建议配合animationend事件处理。框架的过渡系统（如Vue的transition）与animate.css可以互补使用。

建议保留CDN链接的integrity属性（SRI校验值），防止CDN被劫持后加载恶意内容。国内项目可以使用BootCDN或jsDelivr的国内节点。如果项目使用构建工具，推荐通过npm安装，这样可以配合tree shaking按需引入单个动画，减小最终打包体积。

在CSS中覆盖--animate-duration和--animate-timing-function变量即可。例如，在:root中设置--animate-duration: 2s，所有动画都会变为2秒。如果只想调整某个元素的动画，可以在该元素的样式中覆盖变量。如果需要更精细的控制，可以引入Sass源码并修改$animate-duration等变量。

大多数animate.css动画基于transform和opacity，这两个属性由GPU加速，性能表现良好。但如果动画类包含filter或box-shadow，在低端安卓设备上可能触发重绘导致卡顿。建议检查是否使用了rotateIn、flipIn等可能涉及filter的动画类，或在旧设备上做条件加载。

使用延迟工具类。给第一个元素加animate__delay-1s，第二个加animate__delay-2s，以此类推。animate.css提供了1s到5s的固定延迟档位。如果需要更精确的延迟，可以通过CSS变量覆盖--animate-delay，设置为任意时长，例如--animate-delay: 0.3s。

支持所有主流现代浏览器，包括Chrome、Firefox、Safari、Edge的最新版本。它基于CSS3的animation属性，因此不支持IE9及以下版本。对于需要兼容旧版浏览器的项目，可以考虑使用v3版本或配合其他降级方案。浏览器前缀由库自动处理，不需要手动添加。

可以。如果你使用npm安装并配合webpack/vite/rollup等构建工具，可以按需引入单个动画的CSS文件。例如import 'animate.css/animate__fadeInUp.css'只会加载fadeInUp这一个动画的样式。但这需要构建工具的tree shaking支持，纯CDN引入无法做到按需加载。

使用animationend事件。给元素添加动画类名后，监听animationend事件，在回调中执行后续逻辑。注意需要判断event.animationName，因为一个元素可能同时应用多个动画。如果使用了wow.js等库，它们通常也提供了动画完成后的回调接口，可以优先使用。

默认动画时长为1秒，缓动函数为cubic-bezier(0.25, 0.46, 0.45, 0.94)，这是一个轻微的ease-out曲线，让动画结束时减速自然。动画填充模式默认设置为both，确保动画结束后元素保持在最终状态而不会跳回起始位置。这些默认值都可以通过CSS变量覆盖。

监听Swiper的slideChangeTransitionStart事件，在事件回调中给当前幻灯片内的文字元素动态添加animate__animated和具体效果类名。在slideChangeTransitionEnd中移除类名，确保下次切换时动画可以重新触发。这样文字动画的节奏就能与轮播切换同步。

使用IntersectionObserver控制触发时机，只在元素进入视口时才添加动画类名。避免首屏同时播放超过3个入场动画。对于列表项，考虑用CSS的animation-delay实现错峰而非同时触发。如果仍然卡顿，可以降低动画复杂度，减少filter和box-shadow的使用。

可以。两者不冲突。你可以在Tailwind的className中直接添加animate.css的类名，也可以把动画类名配置到Tailwind的theme.extend.animation中。需要注意的是，Tailwind的动画工具类（animate-spin等）和animate.css的animate__前缀不冲突，可以混合使用。

建议遵循animate__前缀的命名约定，例如.animate__myCustomEffect。这样可以避免和库本身的类名冲突，也便于在代码中识别哪些是动画类。自定义动画的@keyframes定义放在独立的CSS文件中，在animate.css之后引入，确保样式优先级可控。

打开浏览器开发者工具，选中应用了动画类名的元素，在computed样式中搜索animation-name。如果看到animate__fadeInUp等值，说明样式已生效。如果animation-name为none，检查是否缺少animate__animated基础类，或CDN链接是否加载成功。也可以禁用JavaScript后刷新页面，如果动画仍然播放，说明纯CSS部分工作正常。