css动画结束在末尾

在制作 CSS 动画时，我们通常会用到 @keyframes 规则，它定义了动画的关键帧。除了关键帧的定义外，我们还需要设置动画的一些属性，例如 animation-duration、animation-timing-function 等等。

当动画完成一次后，它会自动重置到初始状态。但有时候我们希望动画结束后停留在最后一帧的状态，这时候可以使用 animation-fill-mode: forwards; 属性。它指定动画停下来后保持最后一帧的状态，直到被移除或重置。

.example {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: move;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

以上代码展示了一个简单的动画，元素在 2 秒内从左侧移动到了右侧。使用了 animation-fill-mode: forwards; 保持动画结束时的状态。

注意，如果动画被移除或重置，元素会回到起始位置。如果需要保持最后一帧状态直到元素销毁，可以使用 animation-fill-mode: both; 属性。

CSS 动画是创建交互性和吸引力的重要组成部分，掌握动画结束后保持状态的技巧可以让你更好地创建动画效果。