如何在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%*/ }
}

编辑1：这是一个非常简单的例子..第一阶段是白色，但在我想保持它交换红色和绿色..

编辑2：伙计们，我用两种不同的动画解决了它，你可以看到吼叫，谢谢答案！ ：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

您可以组合animation和transition效果，设置等于过渡持续时间的animation-delay ，并从过渡的最终设置开始动画。

这是一个例子：

 .cont { height: 200px; background: #ccf; } .blk { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: #fc9; transition: all 2s ease; } .cont:hover .blk { left: 200px; animation: anim 2s infinite; animation-delay: 2s; } @keyframes anim { 0% { left: 200px; } 100% { left: 200px; top: 100px; } } 

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

Answer 2

注意：不要在关键帧内更改背景图像本身，因为它不应该在FF，IE中工作（并且不起作用）。 您可以在此答案中找到更多信息。 如果你只是交换不透明度，那么它很好。

据我所知，只有一个动画无法达到你想要的效果。 相反，你可以看看使用两个动画的组合，如下面的代码片段。 这里第一个动画在2.5s（= 5s的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秒，因此在两个动画方法中，它应该发生在^第二个动画的1.25秒。 1.25秒意味着^第二个动画持续时间的三分之一 ，因此百分比为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>