混合 CSS 动画迭代

【问题标题】：Blending CSS Animation Iterations混合 CSS 动画迭代
【发布时间】：2014-03-22 05:04:57
【问题描述】：

有没有办法混合 CSS 动画中的迭代？考虑this example。动画到达100%，然后突然重置为0%。我想摆脱那种突然的转变。

【问题讨论】：

对于您的具体示例，问题似乎是最后一个圆圈（最底部的那个）不像其他圆圈那样完整 - 它会膨胀但不会收缩。如果是这样，动画肯定会很流畅？编辑：没关系，考虑一下，它必须这样，因为下一个同时动画。

【解决方案1】：

这只是使 0% 关键帧和 100% 关键帧相同的问题。在你的情况下，

0% {
  box-shadow:
    @tqua @tqua, // bottom right
    @double 0, // middle right
    @tqua -@tqua, // top right
    0 -@double, // top middle
    -@tqua -@tqua, // top left
    -@double 0, // middle left
    -@tqua @tqua, // bottom left
    0 @double 0 @resize; // bottom middle
}

demo

【讨论】：