React项目中Chrome、Safari浏览器下CSS animation-delay不生效问题

问题根因 #

你遇到的animation-delay不生效的核心原因是CSS简写属性的覆盖规则：animation是简写属性，当你没有在简写参数里显式声明animation-delay的值时，它会自动将该属性重置为默认值0s。你目前的代码里把animation-delay写在了animation属性之前，所以单独设置的延迟值被后面的简写属性覆盖，自然不会生效。

修复方案 #

• 方案1：调整属性书写顺序，将所有animation-delay相关属性放在对应animation简写属性之后
  首先请确保你已经定义了fadeIn关键帧（未定义的话需要先补充），调整后的完整代码示例：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.imgCommunity3 {
  max-width: 12.5%;
  height: auto;
  opacity: 0; /* 初始状态设为透明，避免动画开始前元素可见 */
  /* 先写动画简写属性 */
  -webkit-animation: fadeIn 15s;
  -moz-animation: fadeIn 15s;
  -o-animation: fadeIn 15s;
  -ms-animation: fadeIn 15s;
  animation: fadeIn 15s;
  /* 延迟属性放在后面，避免被覆盖 */
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  -o-animation-delay: 50s;
  -ms-animation-delay: 50s;
  animation-delay: 50s;
  /* 动画结束后保持淡入完成的不透明状态 */
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

• 方案2：直接把延迟参数写入animation简写属性，不需要单独写animation-delay
animation简写的参数顺序为：动画名 持续时间 速度曲线 延迟时间 重复次数 播放方向 填充模式，所以可以直接写成：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.imgCommunity3 {
  max-width: 12.5%;
  height: auto;
  opacity: 0;
  -webkit-animation: fadeIn 15s 50s forwards;
  -moz-animation: fadeIn 15s 50s forwards;
  -o-animation: fadeIn 15s 50s forwards;
  -ms-animation: fadeIn 15s 50s forwards;
  animation: fadeIn 15s 50s forwards;
}

序列淡入实现建议 #

给不同的图片、文本块分别设置不同的延迟值即可，比如第一张图片延迟1s、第二张延迟3s、第三张延迟5s、文本块依次往后增加延迟时长，就能实现按指定顺序淡入的效果。

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