CSS keyframes背景动画在Safari 11（Mac）无法运行的解决咨询

我之前也踩过Safari老版本动画兼容性的坑，结合你的代码和Safari 11的特性，给你几个针对性的解决思路：

1. 分离静态与动态背景属性 #

Safari 11对关键帧内重复定义静态属性的处理不太友好，建议把**不需要动画的背景属性（比如background-repeat、background-size、background-image）**移到元素本身的样式中，只在关键帧里保留需要动态变化的background-position——这能大幅降低Safari解析动画的复杂度：

button {
  height: 34px;
  line-height: 18px;
  font-weight: 700;
  font-size: 14px;
  position: absolute;
  bottom: 60px;
  /* 静态背景属性统一写在这里 */
  background-repeat: no-repeat;
  background-size: 300px 300px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 45%,
    rgba(255, 255, 255, 0.4) 49%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.4) 51%,
    rgba(255, 255, 255, 0.0) 55%,
    rgba(255, 255, 255, 0.0) 100%
  );
  /* 同时添加前缀动画属性兼容老版本 */
  animation: shiny 5s infinite;
  -webkit-animation: shiny 5s infinite;
}

/* 关键帧只保留动态变化的属性 */
@keyframes shiny {
  0% {
    background-position: -300px -300px;
  }
  100% {
    background-position: 300px 300px;
  }
}

/* 必须添加带前缀的关键帧，Safari 11对标准关键帧的支持有瑕疵 */
@-webkit-keyframes shiny {
  0% {
    background-position: -300px -300px;
  }
  100% {
    background-position: 300px 300px;
  }
}

2. 修复渐变方向的兼容性 #

你原来用的top left渐变方向，在Safari 11中可能解析异常，建议换成角度值45deg（对应从左上到右下的对角线），这是所有浏览器都能稳定识别的写法。

3. 强制触发硬件加速 #

如果上面的方法还是无效，可以给按钮添加transform: translateZ(0)强制Safari启用硬件加速，修复动画不渲染的bug：

button {
  /* 其他样式... */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

4. 补全关键帧的属性一致性 #

如果必须在关键帧内定义完整的背景属性，一定要确保0%和100%的属性集合完全一致——Safari 11会因为关键帧属性不匹配直接跳过动画：

@keyframes shiny{
  0% {
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: -300px -300px;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 45%, rgba(255,255,255,0.4) 49%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.0) 55%, rgba(255,255,255,0.0) 100%);
  }
  100% {
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: 300px 300px;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 45%, rgba(255,255,255,0.4) 49%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.0) 55%, rgba(255,255,255,0.0) 100%);
  }
}

优先尝试第一种方法（分离静态属性+添加前缀关键帧），这是解决Safari老版本动画问题最直接有效的方案。

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