深入理解 animate.css 实用工具类延迟、速度与重复的完整实践与实现原理【免费下载链接】animate.css A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css本文围绕 animate.css 官方文档中的 Utility Classes实用工具类章节展开系统讲解延迟类animate__delay-*、速度类animate__slow/slower/fast/faster与重复类animate__repeat-*/animate__infinite的使用方法以及背后--animate-delay、--animate-duration、--animate-repeat三个 CSS 变量的定制机制。结合仓库源码你会理解这些工具类如何通过calc()与自定义属性实现“一处修改、全局生效”以及编译产物中的回退声明、prefers-reduced-motion强制重置等细节从而在实际项目中更精确、安全地控制动画节奏。工具类体系与三个核心 CSS 变量animate.css 的工具类不是孤立存在的它们全部建立在三个定义于根元素上的 CSS 自定义属性之上。在 source/_vars.css 中可以看到完整的默认值定义:root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; }这三个变量分别控制变量默认值作用--animate-duration1s动画默认持续时间影响所有动画与速度工具类--animate-delay1s延迟基数所有animate__delay-*类都以其倍数计算--animate-repeat1重复基数所有animate__repeat-*类都以其倍数计算编译产物 animate.css 的开头同样以:root { ... }声明了这三个变量保证任何页面只要引入样式表即可获得一致的默认行为。与之配合的是基础类animate__animated。source/_base.css 中它负责两件事.animated { animation-duration: var(--animate-duration); animation-fill-mode: both; }即所有动画默认时长为1s且animation-fill-mode: both保证元素在动画开始前就应用首帧状态、结束后保留末帧状态。工具类则必须与animate__animated搭配使用——从源码结构看source/_base.css 中每个工具类都写成复合选择器如.animated.delay-2s、.animated.repeat-1编译后变成.animate__animated.animate__delay-2s见 animate.css。这意味着只写animate__delay-2s而漏掉animate__animated工具类不会生效这是使用中最常见的错误。延迟类animate__delay-1s到animate__delay-5s可以直接在元素 class 上追加延迟类例如div classanimate__animated animate__bounce animate__delay-2sExample/div官方文档列出的延迟类如下类名默认延迟时间animate__delay-2s2sanimate__delay-3s3sanimate__delay-4s4sanimate__delay-5s5s需要注意源码中实际还定义了animate__delay-1s即var(--animate-delay)的原值 1 秒完整档位为 1s5s见 source/_base.css.animated.delay-1s { animation-delay: var(--animate-delay); } .animated.delay-2s { animation-delay: calc(var(--animate-delay) * 2); } /* delay-3s、delay-4s、delay-5s 依此类推均为 calc() 乘对应倍数 */关键点在于延迟并不是写死的秒数而是以--animate-delay为基数的倍数。因此在:root上调整该变量可以让所有延迟类整体缩放/* 所有延迟类启动时间变为 2 倍 */ :root { --animate-delay: 2s; } /* 所有延迟类启动时间减半 */ :root { --animate-delay: 0.5s; }例如设置--animate-delay: 0.5s后animate__delay-4s实际延迟为2s。这个设计让“延迟”与“动画时长”可以独立调节前者用--animate-delay后者用--animate-duration。速度类slow、slower、fast、faster通过速度类可以在不新建 keyframes 的情况下改变某次动画的节奏div classanimate__animated animate__bounce animate__fasterExample/div类名默认持续时间源码中的计算式animate__slow2scalc(var(--animate-duration) * 2)animate__slower3scalc(var(--animate-duration) * 3)animate__fast800mscalc(var(--animate-duration) * 0.8)animate__faster500mscalc(var(--animate-duration) / 2)对应实现位于 source/_base.css例如.animated.faster { animation-duration: calc(var(--animate-duration) / 2); } .animated.slow { animation-duration: calc(var(--animate-duration) * 2); }animate__animated基础类本身默认时长为1s所以速度类在默认变量下的实际值就是上表所列。而全局或局部调整--animate-duration会同时影响普通动画和这些速度类/* 所有动画时长翻倍 */ :root { --animate-duration: 2s; } /* 仅该元素时长减半 */ .my-element { --animate-duration: 0.5s; }这里值得深入一点部分动画自身声明了不同于 1 的时长比例。官方文档提到“有些动画时长不足 1 秒由于使用了calc()修改全局时长会保持这些比例”。编译产物中可以找到这类证据heartBeat使用calc(var(--animate-duration) * 1.3)见 animate.css源文件 source/attention_seekers/heartBeat.csshinge使用calc(var(--animate-duration) * 2)见 animate.css源文件 source/specials/hinge.css编译产物中还有多处calc(var(--animate-duration) * 0.75)的时长覆盖如 animate.css。也就是说当你把--animate-duration改成2s时heartBeat变为2.6s、hinge变为4s比例关系被完整保留。这正是工具类“倍数计算”设计的价值一处变量修改整套动画体系等比响应无需逐个改 keyframes 使用者。重复类repeat-1/2/3与infinite通过重复类控制animation-iteration-countdiv classanimate__animated animate__bounce animate__repeat-2Example/div类名默认迭代次数animate__repeat-11animate__repeat-22animate__repeat-33animate__infiniteinfinite源码实现见 source/_base.css.animated.infinite { animation-iteration-count: infinite; } .animated.repeat-1 { animation-iteration-count: var(--animate-repeat); } .animated.repeat-2 { animation-iteration-count: calc(var(--animate-repeat) * 2); } .animated.repeat-3 { animation-iteration-count: calc(var(--animate-repeat) * 3); }与延迟、速度类同理animate__repeat-*基于--animate-repeat默认1计算。官方文档特别提醒建议将该变量设在局部元素而非全局否则页面上所有重复类元素都会被放大容易“失控”/* 该元素动画重复 2 次 建议在局部设置此属性而非全局 否则可能造成混乱的局面 */ .my-element { --animate-repeat: 2; }另外注意animate__infinite是硬编码的infinite不使用任何自定义属性修改--animate-repeat对它无效——这是设计上的刻意区分。文档还提示应阅读 Best Practices 章节再决定如何使用无限重复动画其中“Infinite animations should be avoided”一节明确建议避免无休止的动画因为它们会持续分散用户注意力。构建链视角前缀、回退声明与 compat 版本理解工具类的编译产物能解释两个常见疑问“为什么产物里同时出现1s和var(--animate-duration)”以及“animate.compat.css 是什么”查看 postcss.config.js 可以看到关键配置const prefix ctx.env compat ? : animateConfig.prefix; // ... postcss-prefixer: { prefix, ignore: [/\[class\*.*\]/], }, postcss-preset-env: { features: { custom-properties: true, }, },类名前缀package.json 中animateConfig.prefix为animate__。postcss-prefixer将源码中的.animated.delay-2s统一改写为.animate__animated.animate__delay-2s而compat环境前缀为空字符串产出无前缀的 animate.compat.css供旧版本命名习惯的项目使用。变量回退声明postcss-preset-env启用了custom-properties特性。从编译产物结构看animate.css 中animate__delay-1s同时输出了静态声明animation-delay: 1s与animation-delay: var(--animate-delay)前者作为不支持自定义属性的旧环境回退后者在支持变量时生效。repeat-2、delay-2s等类同理均带calc(1 * 2)、calc(1s * 2)等静态回退见 animate.css。产物入口source/animate.css 按类别import全部动画分文件构建脚本package.json 的raw/prod/compat命令将其编译为根目录下的 animate.css、animate.min.css 与 animate.compat.css。无障碍与打印场景工具类的“强制重置”工具类并非在所有场景下都生效。source/_base.css 末尾有一段媒体查询media print, (prefers-reduced-motion: reduce) { .animated { animation-duration: 1ms !important; transition-duration: 1ms !important; animation-iteration-count: 1 !important; } .animated[class*Out] { opacity: 0; } }在打印或系统开启“减少动态效果”prefers-reduced-motion: reduce时所有动画包括通过工具类设置的时长、重复次数被!important强制重置为1ms且只播放一次同时所有*Out退出动画的元素直接置为opacity: 0保证退场内容不会残留在屏幕上。这也是一条关键实践约束不要试图用更高优先级的 CSS 覆盖这段逻辑Best Practices 明确指出该媒体查询是自 3.7.0 起内置的“关键无障碍特性”用于帮助前庭障碍与光敏性癫痫用户。实战要点小结工具类必须与animate__animated复合出现源码中的复合选择器决定了单独写animate__delay-2s不会生效。用变量而非改类来调整节奏--animate-delay控制延迟基数--animate-duration控制时长基数全局或局部均可--animate-repeat控制重复基数建议仅局部使用三者均可在:root或任意元素上覆盖。倍数比例被calc()完整保留无论是速度类还是heartBeat、hinge这类自带比例的动画调整--animate-duration都会等比响应。animate__infinite不受--animate-repeat影响且官方最佳实践建议谨慎甚至避免无限动画。prefers-reduced-motion与打印场景下工具类会被强制重置依赖动画传达状态的功能需另行兜底如*Out类元素已被库置为不可见。【免费下载链接】animate.css A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考