css 动画只执行一次 |vw在css中是什么

// 定义一个 class 名为 fade-in
.fade-in {
opacity: 0;
animation: fadeIn ease-in 1;
animation-fill-mode: forwards; /*保持动画链条最后一个效果*/
animation-duration: 1s;
}
// 定义动画
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

上述代码中，大家定义了一个.fade-in的CSS类。它的animation属性指向一个名为fadeIn的keyframes动画，这个动画会在1秒内将元素的透明度从0渐变到1。animation-fill-mode属性设置为forwards，即保持动画链条最后一个效果，这样动画执行完后，元素将不再继续变化。

接下来，大家可以在需要使用动画的元素上应用这个类：

Hello World

这样，动画只会执行一次，并且在动画结束时，元素的最终状态将被保持。

总结：

通过设置animation-fill-mode为forwards，大家可以让动画只执行一次，并且在动画结束时保持最终状态。

只希望动画执行一次的时候，大家可以考虑使用这种方法。