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：这是一个非常简单的例子......第一阶段是WHITE，但在我想保持它交换红色和绿色之后..

EDIT2：大家好，我用两种不同的动画解决了它，你可以看到吼叫，谢谢答案！：d

＆＃13;

        .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;
          }
        }

＆＃13;

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

＆＃13;

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中工作（并且不起作用）。您可以在this answer中找到更多信息。如果你只是交换不透明度，那就没关系了。

据我所知，只有一个动画无法达到你想要的效果。相反，你可以看看使用两个动画的组合，如下面的代码片段。这里第一个动画在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为5s，因此25％关键帧将在1.25s发生，因此第一个animation-duration将为1.25s。第二个动画的持续时间将是剩余的3.75秒。现在，由于一帧被移动到它自己的单独动画（并且持续时间已经改变），第二个动画中的其他关键帧百分比必须与原始帧不同。例如，在原始动画中，50％关键帧将发生在2.5秒，因此在两个动画方法中，它应该发生在2 ^nd动画的1.25秒处。 1.25s意味着2 ^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>

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

2 个答案: