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

Question

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

3

我只想跳到动画的另一个阶段.. 例如：在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>

- Railton Santos

你的意思是下一次迭代需要从20%关键帧开始吗？那是不可能的。 - Harry

实际上是25％！抱歉。 - Railton Santos

我正在交换两个背景图像，但在第一个关键帧（0％）中，这两个图像的不透明度都为0，因此我需要跳转到第二个关键帧才能使这两个图像交换。附：抱歉我的英语不好 D: - Railton Santos

请创建一个演示，以便我们可以看到是否有其他实现此目标的方法。 - Harry

2个回答

2

你可以将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>

- Banzay

提醒一下 - 动画和过渡在跨浏览器时并不总是能很好地配合。以下是一个这样的案例 - https://dev59.com/AY7da4cB1Zd3GeqP_lXc#32142949 - Harry

@Harry 尽管你是对的，但这个特定的用例不应该有任何问题。（首先使用转换，然后使用延迟动画，没有填充模式） - vals

确实，@vals，我绝对同意你的观点。目前的这个使用情况不会有问题，但是我想说的是，在同一个属性（在同一个状态下）同时使用过渡和动画是一个有些模糊的领域。并没有明确定义哪一个应该控制，所以我们永远不知道浏览器明天可能会出现什么问题。这就是为什么我只是提醒一下（也就是说，请记住可能会出现问题）。 - Harry

另外一件事（再次抱歉，我没有贬低Banzay的好回答的意图，只是指出），我们不知道动画是否在用户交互时运行。如果不是，则使用转换可能不是一个选项。 - Harry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

注意: 在关键帧中不要更改背景图像本身，因为在FF、IE中它不能正常工作（并且不会起作用），如果您只是交换不透明度，则没有问题。this answer中可以找到更多信息。

据我所知，只使用一个动画无法实现您要查找的效果。相反，您可以尝试使用两个动画的组合，如下面的代码片段所示。这里第一个动画在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秒时发生，因此在两个动画的方法中，它应该在第二个动画的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>