关于animate.css中animation相关参数使用规则的疑问

CSS动画相关问题解答 #

1. 你贴出的代码属于标准CSS类选择器定义 #

是的，这几段完全是预定义的公共CSS类，各部分作用如下：

• .animated是基础动画类，定义了两个核心默认属性：animation-duration: 1s指定动画默认播放时长为1秒，animation-fill-mode: both指定动画播放前保持第一帧样式、播放结束后保持最后一帧样式，不会跳回动画触发前的元素状态；带-webkit-前缀的属性是为了兼容旧版WebKit内核浏览器（比如老版Safari、旧安卓内置浏览器）
• .animated.infinite是组合类，只有同时给元素加上animated和infinite两个类时才会生效，作用是把动画迭代次数设为无限循环
• .animated.hinge是特定动画的适配类，给同时加了animated和hinge类的元素把动画时长覆盖为2秒，适配hinge（铰链掉落）这种本身需要更长时间的动画效果

2. 这些类的使用方法 #

你不需要修改CSS源码，直接在HTML元素的class属性里添加对应类即可，示例：

<!-- 单次播放的默认时长动画 -->
<div class="animated fadeIn">测试元素</div>
<!-- 无限循环的动画 -->
<div class="animated fadeIn infinite">循环动画元素</div>
<!-- hinge专属动画，自动套用2秒时长 -->
<div class="animated hinge">掉落动画元素</div>

3. 放在CSS文件开头不会作用于整张样式表 #

CSS类只有被应用到HTML元素上的时候才会生效，和它在CSS文件里的位置无关。放在开头只是animate.css作者的编码习惯，方便使用者快速找到基础配置项，不会自动给整个页面所有元素加动画。

4. 开发者在自定义类里声明animation-duration的原因 #

这属于按需覆盖默认配置的常规操作：

• 公共类.animated的默认时长是1秒，如果某个特殊元素需要3秒的动画时长，不需要修改公共类的代码（改了会影响所有用了animated类的元素），直接给这个元素的自定义类单独加animation-duration:3s就可以覆盖默认值，自定义类的优先级更高。
• 示例：

/* 自定义类 */
.my-slow-card {
  animation-duration: 3s !important; /* 加!important可以确保覆盖公共类的优先级，按需使用 */
}

<!-- 这个元素的动画时长会变成3秒，而不是默认的1秒 -->
<div class="animated fadeIn my-slow-card">慢动画卡片</div>

内容的提问来源于stack exchange，提问作者Tech Tips