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

Question

以下代码会导致＆＃34;无效的属性值＆＃34;关于动画属性，我不知道为什么。

编辑，完整代码

.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中手动执行这些操作。