在动画上获取​​“无效的属性值”

Question

以下代码导致动画属性出现“无效的属性值”，我不知道为什么。

编辑，完整代码

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite, 
    colors 5.2s ease-in-out infinite;
}

@keyframes colors {
    0% { stroke: #4285F4; }
    25% { stroke: #DE3E35; }
    50% { stroke: #F7C223; }
    75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: 187; }
 50% {
   stroke-dashoffset: 46.75;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: 187;
   transform:rotate(450deg);
 }
}

我正在尝试实现取自此示例的微调器： http://codepen.io/mrrocks/pen/EiplA

Answer 1

如果您使用的是 Chrome/Safari，则必须为 .spinner 添加 -webkit-animation，如下所示：

-webkit-animation: rotator 1.4s infinite linear;

你必须为.path做同样的事情：

-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;

SASS 将同时生成 animation 和 -webkit-animation，但您必须在 CSS 中手动完成。