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

我只想跳到我动画的另一个阶段。。例：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：这里有一个非常简单的例子。。第一个阶段是白色的，但之后我想保持它在红色和绿色的交换

EDIT2：伙计们，我用两种不同的动画解决了这个问题，正如你们可以看到的，下面是答案！：D

.test{
显示：块；
宽度：50px；
高度：50px；
动画：动画BG 4s，动画BG2 2s无限2s交替；
}
@关键帧动画BG{
0% {
背景：白色；
}
100% {
背景：红色；
}
}
@关键帧动画BG2{
0% {
背景：红色；
}
100% {
背景：绿色；
}
}

---

您可以组合

动画

和

过渡

效果，设置相等过渡持续时间的

动画延迟

，并从过渡的最终设置开始动画

以下是一个例子：

.cont{
高度：200px；
背景：#共因失效；
}
布莱克先生{
位置：绝对位置；
左：0；
排名：0；
宽度：100px；
高度：100px；
背景:#fc9；
过渡：一切都很轻松；
}
.续：悬停.黑色{
左：200px；
动画：动画2无限；
动画延迟：2s；
}
@关键帧动画{
0% {
左：200px；
}
100% {
左：200px；
顶部：100px；
}
}

测试

注意：不要在关键帧内更改背景图像本身，因为它在FF中不应该工作（也不会工作）。您可以在中找到更多信息。如果只交换不透明度，则可以

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

.test{
显示：块；
宽度：50px；
高度：50px；
动画：动画BG1 2.5s 1，/*2.5s，因为它是50%，并且只有一次白色到绿色的迭代*/
动画背景2.5s 2.5s无限；/*等待2.5s，然后无限循环绿色到红色*/
}
@关键帧动画BG1{
0% {
背景：白色；
}
100% {
背景：绿色；
}
}
@关键帧动画BG{
0% {
背景：绿色；
}
100% {
背景：红色；
}
}

---

您的意思是下一次迭代需要从20%的关键帧开始？那是不可能的，实际上是25%！抱歉。我正在交换两个背景图像，但在第一个关键帧（0%）中，这两个图像的不透明度均为0，因此我需要跳到第二个关键帧以交换这两个图像。。D:请制作一个演示，这样我们就可以看看是否有其他方法可以实现这一点。请注意，动画和过渡并不总是在跨浏览器的情况下很好地协同工作。这里有一个这样的例子-@Harry即使你是对的，这个特殊的用例应该不会有任何问题。（先使用一个过渡，然后使用一个延迟的动画，没有填充模式）是的，的确@vals，我绝对同意你的观点。这个特定的用例目前不会有问题，但我想说的是，在相同的属性（在相同的状态）上使用transition+动画有点灰色。它还没有完全定义应该由谁来控制，因此我们永远不知道浏览器明天是否会破坏某些东西。这就是为什么我刚才说这是一个警告（比如，请记住，有些事情可能会出错）。另一件事（再次抱歉，我无意贬低班扎伊的好答案，只是指出），我们不知道动画是否在用户交互上运行。如果没有，那么使用转换可能不是一个选项。是的，我知道，但这项工作不是针对浏览器，而是针对ipad应用程序：D@RailtonSantos好的，但是这种方法应该仍然有效。你试过了吗？它会给你带来任何错误或问题吗？如果是，让我知道，我会看看如何解决。谢谢哈利，我已经解决了，正如你在上面看到的。。（：是的，你的答案和操作编辑基本上是一样的：-）是的，很抱歉，这是我第一次问这个问题，谢谢各位：D