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

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% block 。绿色只占15%……这似乎有点奇怪。然而，它会像仅获取开始百分比并将其乘以动画持续时间并将其设置为延迟一样简单吗？那么末日如何规定呢？

如果不需要解决错误修复，这段代码会是什么样子？

Answer 1

看起来有人在最初的评论之后更改了代码。

现在只有 2 个动画是多余的，所以评论没有完全意义。

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

在这种情况下，那可能是

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

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