css 动画执行完后停止 |css 网页菜单自动换行

第一种方法是使用animation-fill-mode属性，设置动画执行完后的状态。animation-fill-mode属性有四个值：none、forwards、backwards、both。其中，none表示动画执行完后回到起始状态，即没有停止；forwards表示动画执行完后停留在最后一帧的状态，保持动画最后的状态；backwards表示在动画执行前停留在第一帧的状态，保持动画的初始状态；both表示同时设置forwards和backwards两种状态。可以根据需要选择相应的属性值，让动画在执行完后不再继续。

.animation{
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes move{
from {transform: translateX(0);}
to {transform: translateX(100px);}
}

第二种方法是使用transition属性，让动画执行完后过渡到另一个状态。transition属性有两个值：transition-property和transition-duration。其中，transition-property表示要过渡的属性，例如background、color、transform等；transition-duration表示过渡时间。通过设置transition-property和transition-duration，可以让动画在执行完后过渡到指定状态，停止执行。

.transition{
transition-property: transform;
transition-duration: 2s;
}
.transition:hover{
transform: translateX(100px);
}

以上两种方法都可以让CSS动画执行完后停止，选择方法要看具体需求。动画执行完后自动停止，可以提高网页性能，增强用户体验。