[分享]css动画执行完之后保持

CSS动画是网页中常见的元素之一，它能够为页面增加生动的视觉效果，提升用户体验。在使用CSS动画时，我们可以通过设置animation的延迟时间和时长来控制动画的执行。然而，在动画执行完成之后，它会恢...

CSS动画是网页中常见的元素之一，它能够为页面增加生动的视觉效果，提升用户体验。在使用CSS动画时，我们可以通过设置animation的延迟时间和时长来控制动画的执行。然而，在动画执行完成之后，它会恢复到原始状态，如果想让动画保持在结束状态，我们可以通过以下方法实现：

.ani {
  animation: my_animation 2s forwards;
}

@keyframes my_animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: .5;
  }
} 

在上面的示例中，我们给动画元素添加了一个animation属性，并设置了forwards参数。forwards参数能够让动画在执行完成之后保持在结束状态，不再返回到起始状态。此外，我们还可以使用animation-fill-mode属性，它有以下取值：

• none：默认值，动画完成之后恢复到初始状态

• forwards：动画完成之后保持在结束状态

• backwards：动画在等待时间内先显示最终状态，然后再恢复到初始状态，适用于animation-delay属性设置的情况

• both：同时应用forwards和backwards两种状态

总之，在动画执行完成之后保持在结束状态，能够让页面更加生动，给用户带来更好的体验。因此，在使用CSS动画时，我们需要根据实际需求来选择合适的animation-fill-mode属性值。