[分享]css做的动画只能执行一次

CSS动画是一种很有趣的设计元素，它让网页更加生动有趣。然而，有些时候我们只想让动画执行一次，而不是无限循环播放。下面我们将介绍如何使用CSS实现只执行一次的动画效果。/定义动画/ keyframes...

CSS动画是一种很有趣的设计元素，它让网页更加生动有趣。然而，有些时候我们只想让动画执行一次，而不是无限循环播放。下面我们将介绍如何使用CSS实现只执行一次的动画效果。

/*定义动画*/
@keyframes example {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

/*应用动画到元素上*/
.my-element {
  animation: example 1s;
  animation-fill-mode: forwards;
} 

在上面的CSS代码中，我们首先定义了一个名为example的动画，这个动画从透明度为0的状态过渡到透明度为1的状态。然后我们将这个动画应用到了一个类名为.my-element的元素上，并指定动画执行时间为1秒。

然而，如果我们只这样做，动画将会在结束后回到起始状态，重新开始播放。这显然不是我们想要的效果。为了让动画只执行一次并停留在结束状态，我们需要将animation-fill-mode属性的值设置为forwards。

当animation-fill-mode的值为forwards时，动画将在执行结束后停留在最后一帧的状态。这样，即使动画结束后不再循环播放，元素的状态也将保持在动画结束时的状态。

通过以上CSS代码，我们可以实现只执行一次的动画效果。如果你想让动画在另一个事件触发后重新播放，可以使用JavaScript通过添加或删除类名来控制元素的动画效果。