css - 如何在 CSS 关键帧上跳转到动画的另一个阶段？

Question

我只想跳到动画的另一个阶段.. 例如:在 100% 动画跳到 25% 而不是 0% 之后..

@keyframes animation {
  0% { /*animation 1*/ }
  25% { /*animation 2*/ }
  50% { /*animation 3*/ }
  75% { /*animation 4*/ }
  100% { /*animation 5 // and jump to 25% instead 0%*/ }
}

EDIT1:这是一个非常简单的例子..第一阶段是白色，但在我想让它保持红色和绿色交换之后..

EDIT2:伙计们，我用两种不同的动画解决了它，正如你在下面看到的，谢谢你的答案! :D

        .test {
          display:block;
          width:50px;
          height:50px;
          animation: animatedBg 4s, animatedBg2 2s infinite 2s alternate;
        }

        @keyframes animatedBg {
          0% {
            background: white;
          }
            100% {
            background: red;
          }
        }

        @keyframes animatedBg2 {
          0% {
            background: red;
          }
            100% {
            background: green;
          }
        }

<div class="test"></div>

Answer 1

Note: Don't change the background image itself within keyframes as it is not supposed to work (and won't work) in FF, IE. You can find more info in this answer. If you are only swapping opacity then it is fine.

据我所知，只用一个动画是无法达到您想要的效果的。相反，您可以看看使用两个动画的组合，如下面的代码片段所示。这里第一个动画在 2.5 秒内从白色渐变为绿色(= 5 秒的 50%)并且这个动画只运行一次(迭代计数 = 1)。第二个动画在 2.5 秒内从绿色逐渐变为红色。这个有 2.5 秒的延迟，因为它必须在第一个动画运行时处于空闲状态，然后在无限循环中执行(迭代计数 = 无限)。这会产生您正在寻找的效果。

.test {
  display: block;
  width: 50px;
  height: 50px;
  animation: animatedBg1 2.5s 1, /* 2.5s because it was 50% and only 1 iteration for white to green */
             animatedBg 2.5s 2.5s infinite; /* wait 2.5s then infinitely loop the green to red */
}
@keyframes animatedBg1 {
  0% {
    background: white;
  }
  100% {
    background: green;
  }
}
@keyframes animatedBg {
  0% {
    background: green;
  }
  100% {
    background: red;
  }
}

<div class="test"><div>

---

同样，下面是您的原始动画示例。在这里，我假设 animation-duration 为 5 秒，因此 25% 的关键帧将发生在 1.25 秒，因此第一个的 animation-duration 将为 1.25 秒.第二个动画的持续时间将是剩余的 3.75 秒。现在，由于一帧被移动到它自己的单独动画(并且持续时间已更改)，第二个动画中的其他关键帧百分比必须与原始动画不同。例如，在您的原始动画中，50% 的关键帧将发生在 2.5 秒，因此在双动画方法中，它应该发生在第二个^nd 动画的 1.25 秒。 1.25 秒表示第二个^nd 动画持续时间的三分之一，因此百分比为 33%。同样，原始动画中的 75% 关键帧将发生在 3.75 秒的持续时间。这意味着这应该发生在第二个动画的 2.5 秒，也就是第二个动画的 三分之二，因此获得 66% 的关键帧。

.test {
  display: block;
  width: 50px;
  height: 50px;
  animation: animatedBg1 1.25s 1, animatedBg 3.75s 1.25s infinite;
}
@keyframes animatedBg1 {
  0% {
    background: white;
  }
  100% {
    /* this should be the 25% keyframe */
    background: green;
  }
}
@keyframes animatedBg {
  0% {
    /* same as 25% keyframe */
    background: green;
  }
  33% {
    /* same as 50% keyframe, percentage different as duration has changed and we have moved one keyframe to a different animation */
    background: tomato;
  }
  66% {
    background: rebeccapurple;
  }
  100% {
    background: red;
  }
}

<div class="test">
  <div>