css - 如何设置 CSS 动画的当前帧(或类似帧)？

Question

这个问题在这里已经有了答案:

Seek to specific keyframe in css3 animation (1 个回答)

关闭 6年前。

我有一个 CSS 关键帧动画，它本身非常普通。但是，我希望能够强制动画位于特定帧。类似于 anim.setProgress(0.13) 的东西，它将动画设置为 13%沿着。 我该怎么做？

请注意，我不只是想在任意点开始动画。我希望能够打断它并说“回到 32%”之类的东西，不管动画有多远。

Answer 1

给动画一个负的animation-delay值。对于运行 10 秒的动画，13% 的帧将以 -1.3s 为目标。

Documentation

If the value for ‘animation-delay’ is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative ‘animation-delay’, the starting values are taken from the moment the animation is applied.

示例

div.loading {
  animation: loading 10s linear 1;
  animation-play-state: paused;
  animation-delay: -1.3s;
  /*start at 13%*/
}
div.ten-seconds {
  animation-delay: -1s;
  /*start at 10%*/
}
div.zero-seconds {
  animation-delay: 0s;
  /*start at 0%*/
}
/*Note how the keyframes start at 0 width*/

@keyframes loading {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/*Just for this example below*/

input {
  display: none
}
label {
  display: block;
  background: gray;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  margin: 20px 0 20px 0;
  color: #FFF;
  cursor: pointer;
}
input:checked ~ .loading {
  animation-play-state: running;
}
div {
  height: 100px;
  background: pink;
}
div.ruler {
  width: 13%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #FFF;
  background: gray;
  border-bottom: solid 2px #000;
}
div.ruler.bottom {
  width: 10%;
}

<input type="checkbox" id="start" />
<label for="start">Start / Pause</label>
<div class="ruler">Go 13%</div>

<div class="loading"></div>

<div class="ruler bottom">Go 10%</div>

<div class="loading ten-seconds"></div>

<h2>No delay below</h2>

<div class="loading zero-seconds"></div>