css动画停在最后一秒

如果你想让CSS动画在最后一秒停止，有很多种方法可以实现。以下是一些可能的选择：

.method-1 {
  animation: my-animation 1s linear forwards;
}

.method-2 {
  animation: my-animation 1s linear;
  animation-fill-mode: forwards;
}

.method-3 {
  animation: my-animation 1s linear;
}
.method-3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: my-animation 1s linear forwards;
}
.method-3:hover:before {
  animation-play-state: paused;
}

在以上代码中，my-animation是你想要应用的动画名称，1s是动画持续时间，linear是动画时间函数，forwards是动画结束后保持最后一帧状态。

在第一个方法中，我们直接在animation属性中指定了forwards选项。

在第二个方法中，我们使用了animation-fill-mode属性来指定最后一帧状态。这个属性有四个选项：

• none：默认值，动画结束后不会保持任何状态。
• forwards：动画结束后保持最后一帧状态。
• backwards：动画执行前先设定起始状态为第一帧状态。
• both：同时设置forwards和backwards选项。

第三个方法是一种使用伪元素的方法。我们将动画应用到伪元素上，然后在

:hover

事件中暂停动画的播放，这样就可以保持动画在最后一秒停止的状态。