如何使用 CSS 将动画精确播放两次？

在 CSS 中，我们可以利用 animation 属性来控制动画的播放效果。然而，当我们需要让动画精确地播放两次时，该如何操作呢？

利用 animation-iteration-count 属性

在 CSS 中，animation-iteration-count 属性用于指定动画的播放次数。我们可以将该属性的值设置为 2，来让动画精确地播放两次。示例代码如下：

.animation {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: 2;
}

@keyframes example {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

在上述示例代码中，我们将 .animation 元素的 animation-iteration-count 属性值设置为 2，并在 @keyframes 中定义了一种名为 example 的动画。动画在 0% 时元素的 transform 属性为 translateX(0)，在 100% 时元素的 transform 属性为 translateX(100%)。该动画的播放时长为 2s。

利用 animation-play-state 属性

除了 animation-iteration-count 属性之外，我们还可以利用 animation-play-state 属性来控制动画的播放次数。该属性用于指定动画的播放状态，包括 running（运行中）和 paused（已暂停）两种状态。我们可以在动画播放完一次后，将 animation-play-state 属性的值设置为 paused，以实现动画精确地播放两次。示例代码如下：

.animation {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.animation.play-twice {
  animation-iteration-count: 1;
  animation-play-state: paused;
}

@keyframes example {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

在上述示例代码中，我们将 .animation 元素的 animation-iteration-count 属性值设置为 infinite，并将 animation-play-state 属性值设置为 running，以实现动画一直运行。当需要让动画精确地播放两次时，我们将该元素的类名设置为 play-twice，同时将 animation-iteration-count 属性值设置为 1，将 animation-play-state 属性值设置为 paused，以暂停动画的播放。

需要注意的是，上述代码仅适用于定时动画。对于交互式动画，我们需要通过 JavaScript 来实现类似的效果。