IE11、Edge及Safari中box-shadow动画失效问题咨询

看起来你遇到的是旧浏览器对CSS动画属性初始值的兼容性问题，我来帮你拆解下原因和解决方案：

问题根源 #

IE11、旧Edge以及iOS11的Safari对CSS动画的触发逻辑比较严格：如果动画要修改的属性（比如box-shadow）在元素的初始样式中没有明确声明，浏览器会忽略这个属性的动画变化。而transform能正常工作，是因为它的初始值（none）是浏览器默认识别的，不需要额外声明。

具体解决方案 #

1. 给目标元素添加初始box-shadow样式 #

在你的.loading-container（或对应类）的初始CSS里，明确设置一个基础的box-shadow值，哪怕是视觉上无效果的初始值：

.loading-container {
  /* 初始值设为透明无扩散阴影，不影响视觉但让浏览器识别该属性 */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  /* 其他样式... */
}

这样动画修改box-shadow时，旧浏览器就能正确识别属性的变化过程了。

2. 确保动画关键帧定义完整 #

检查你的CSS动画关键帧，要保证from/0%和to/100%都明确声明box-shadow状态，比如：

@keyframes loading-shadow {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

避免只在部分关键帧里写box-shadow，这也会导致旧浏览器无法解析动画。

3. React组件中的样式注意事项 #

如果用内联样式或CSS-in-JS方案（比如styled-components），也要确保初始状态包含box-shadow：

• 内联样式示例：

<div 
  className="loading-container"
  style={{ boxShadow: '0 0 0 rgba(0,0,0,0)' }}
>
  {/* 组件内容 */}
</div>

• styled-components示例：

const LoadingContainer = styled.div`
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  animation: ${loadingShadow} 1.5s infinite;
  /* 其他样式 */
`;

额外验证点 #

• 检查是否有其他CSS规则覆盖了初始box-shadow，可以用浏览器开发者工具查看元素的计算样式
• 对于iOS11的Safari，还要注意用户是否开启了系统设置里的“减少动态效果”，开启后系统会禁用动画，需要提醒用户检查该设置

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