CSS 暂停在最后一帧的 CSS3 动画

在本文中，我们将介绍如何在 CSS3 动画中暂停在最后一帧。

阅读更多：CSS 教程

什么是 CSS3 动画

CSS3 动画是一种通过 CSS 样式来实现的动画效果。它使用了关键帧（keyframes），可以设定不同的样式和时间点，从而在网页中创建出流畅和生动的动画效果。在 CSS3 动画中，可以设定动画的开始时间、持续时间、重复次数、动画方向等属性。

如何创建 CSS3 动画

CSS3 动画可以通过 @keyframes 规则来定义。下面是一个简单的例子：

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slidein {
  animation: slidein 1s infinite;
}

在上面的例子中，我们定义了一个名为 slidein 的动画，从左侧滑入。然后，我们将动画应用到了名为 .slidein 的元素上，持续时间为 1 秒，无限循环。

如何停止在最后一帧

要停止在最后一帧，我们可以使用 animation-fill-mode 属性。该属性控制动画在运行前和运行后是否应用样式。默认值为 none，表示动画不会影响该元素的样式。

要停止在最后一帧，我们需要将 animation-fill-mode 属性的值设为 forwards：

.slidein {
  animation: slidein 1s infinite;
  animation-fill-mode: forwards;
}

这样，当动画结束时，元素将停留在最后一帧的样式。

示例说明

为了更好地理解如何停止在最后一帧，让我们来看一个实际的例子。

我们有一个按钮，希望在按钮点击时触发一个向右滑动的动画，然后停止在最右侧。下面是 HTML 和 CSS 的代码：

<button id="btn" onclick="stopAnimation()">点击停止动画</button>

<div class="box"></div>

<style>
  @keyframes slidein {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .box {
    width: 100px;
    height: 100px;
    background: blue;
    animation: slidein 1s infinite;
    animation-fill-mode: forwards;
  }
</style>

<script>
  function stopAnimation() {
    var box = document.querySelector('.box');
    box.style.animationIterationCount = '1';
  }
</script>

在上面的代码中，我们首先定义了一个按钮，它有一个点击事件 onclick="stopAnimation()"，用来触发停止动画的函数。

然后，在 CSS 中，我们创建了一个 box 类，它是一个蓝色的正方形。我们将动画应用到该类，并设置了 animation-fill-mode 的值为 forwards，以便动画停止在最后一帧。

在 JavaScript 的 stopAnimation 函数中，我们通过选择器获取到 .box 元素，并将其 animationIterationCount 属性设为 1，即使动画只执行一次。

当我们点击按钮时，动画将执行一次，并停止在最后一帧，也就是元素右侧。