如何使用动画延迟删除多余关键帧的使用

Question

我正在查看Google Polymer的源代码，我发现了这个：

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 **/
.active .spinner-layer.blue {
  -webkit-animation: blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  animation: blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.red {
  -webkit-animation: red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  animation: red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.yellow {
  -webkit-animation: yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  animation: yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.green {
  -webkit-animation: green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
  animation: green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
@-webkit-keyframes blue-fade-in-out {
  from { opacity: 1; }
  25% { opacity: 1; }
  26% { opacity: 0; }
  89% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes blue-fade-in-out {
  from { opacity: 1; }
  25% { opacity: 1; }
  26% { opacity: 0; }
  89% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}
@-webkit-keyframes red-fade-in-out {
  from { opacity: 0; }
  15% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
}
@keyframes red-fade-in-out {
  from { opacity: 0; }
  15% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
}
@-webkit-keyframes yellow-fade-in-out {
  from { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  76% { opacity: 0; }
}
@keyframes yellow-fade-in-out {
  from { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  76% { opacity: 0; }
}
@-webkit-keyframes green-fade-in-out {
  from { opacity: 0; }
  65% { opacity: 0; }
  75% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes green-fade-in-out {
  from { opacity: 0; }
  65% { opacity: 0; }
  75% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

我同意这段代码看起来非常冗长，但我不确定如何使用动画延迟而不是自定义关键帧来重新表达它。

并非所有颜色似乎都占了整整 25%。绿色只占15%...这似乎有点奇怪。尽管如此，它是否像将开始百分比乘以动画持续时间并将其设置为延迟一样简单？那么，如何指定末日呢？

如果不需要解决错误修复，此代码将如何显示？

Answer 1

看起来有人在最初的注释后更改了代码。

就像现在一样，只有 2 个动画是多余的，所以评论并不完全有意义。

这是循环动画中的常见做法，在您的情况下，4 个元素共享 - 或应该共享 - 相同的动画，但以顺序方式重用动画并仅更改开始时间（通过初始延迟属性）

在这种情况下，那可能是

@keyframes red-fade-in-out {
  0% { opacity: 1; }
  25% { opacity: 1; }
  26% { opacity: 0; }
  100% { opacity: 0; }
}

然后每个类都会有不同的延迟，是动画总时间的 1/4。