SVG星形动画在Chrome和Firefox正常运行但Safari无法启动如何解决

问题原因 #

该问题是Safari对CSS动画和SVG属性的兼容性限制导致的，核心触发点有4个：

• 仅给动画调用属性加了-webkit-前缀，未补充带-webkit-前缀的@keyframes规则，部分版本Safari无法识别无前缀的关键帧定义
• 关键帧内用到了stroke-dashoffset属性，但未给元素显式初始化stroke-dasharray和stroke-dashoffset的初始值，Safari不会自动推断未声明的SVG属性默认值，会直接阻断整个动画执行
• 缺少-webkit-animation-delay前缀属性，同时你写的-webkit-stroke、-webkit-stroke-width属于无效属性，SVG的描边属性本身无webkit前缀，多余声明可能干扰Safari的属性解析
• 关键帧缺少0%初始帧的显式声明，Safari对缺失初始帧的动画兼容性极差，不会自动从元素默认属性过渡

解决方法 #

按以下步骤修改代码即可兼容全平台浏览器：

1. 补充@-webkit-keyframes规则，和原有staranimation内容完全一致
2. 给.fillfirst、.fillsecond两个类添加stroke-dasharray、stroke-dashoffset的初始值声明
3. 补全-webkit-animation-delay前缀属性，删除无效的webkit开头的SVG描边属性
4. 在关键帧开头添加0%初始帧，声明所有动画属性的初始值

修改后代码示例 #

/* 补充webkit前缀的关键帧 */
@-webkit-keyframes staranimation {
  0% {
    stroke-dashoffset: 0;
    stroke: #fff;
    opacity: 1;
    fill: #ffff00;
  }
  10% {
    stroke-dashoffset: 100;
    stroke: #a98f22;
    opacity: 1;
  }
  30% {
    opacity: 1;
    fill: #a98f22;
  }
  60% {
    opacity: 0.3;
    fill: #a98f22;
  }
  80% {
    opacity: 0.6;
    fill: #a98f22;
  }
  100% {
    opacity: 1;
    fill: #a98f22;
    stroke: #a98f22;
  }
}
@keyframes staranimation {
  0% {
    stroke-dashoffset: 0;
    stroke: #fff;
    opacity: 1;
    fill: #ffff00;
  }
  10% {
    stroke-dashoffset: 100;
    stroke: #a98f22;
    opacity: 1;
  }
  30% {
    opacity: 1;
    fill: #a98f22;
  }
  60% {
    opacity: 0.3;
    fill: #a98f22;
  }
  80% {
    opacity: 0.6;
    fill: #a98f22;
  }
  100% {
    opacity: 1;
    fill: #a98f22;
    stroke: #a98f22;
  }
}

.star {
  polygon {
    &.fillfirst{
      stroke: #fff;
      stroke-width: 1;
      fill: #ffff00;
      /* 显式初始化描边动画属性 */
      stroke-dasharray: 100;
      stroke-dashoffset: 0;
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      /* 补全前缀动画延迟 */
      animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;
    }
    &.fillsecond {
      stroke: #fff;
      stroke-width: 1;
      fill: #ffff00;
      /* 显式初始化描边动画属性 */
      stroke-dasharray: 100;
      stroke-dashoffset: 0;
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      animation-delay: 1s;
      -webkit-animation-delay: 1s;
    }
  }
}

原有HTML结构无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Mario.G