css 如何只让动画执行一次

CSS动画使得我们的网页更加丰富、生动。但是您是否出现过CSS动画不断重复的情况？这可能会让您的页面看起来很烦闷。要避免这种情况出现，如下面介绍的技巧可以有所帮助。

有很多方法可以防止CSS动画重复，例如使用实际图片（如GIF）等比较复杂的方法。但是，如果您只是想简单地处理这个问题，那么请继续阅读下面的内容。

下面给出一个示例CSS动画：

.wobble {
        animation: wobble 1s infinite;
}
@keyframes wobble {
    0% {
     transform: translate(0px,0px) rotate(0deg);
 }
    50% {
     transform: translate(20px,-10px) rotate(10deg);
 }
    100% {
     transform: translate(10px,0px) rotate(-10deg);
 }
}

这个CSS代码块创建了一个名为“wobble”的动画，它将一个元素在1秒内不断地抖动。如果您重载或刷新页面，您会发现该动画将不断重复。

那么如何只让它执行一次呢？

请使用以下代码调整您的CSS块：

.wobble {
        animation: wobble 1s 1;
}

这仅仅是将“infinite”（表示无限执行）改为“1”（表示只执行一次）。如果您现在重载或刷新页面，您会发现该动画只会执行一次。

您还可以使用JavaScript动态修改元素的类名，这是通过动态添加一个类来实现的，该类只包含可以播放一次的动画。例如：

function playAnimationOnce(element, animationClass) {
        element.classList.add(animationClass);
    element.addEventListener('animationend', function() {
            element.classList.remove(animationClass);
    }
, {
once: true}
    );
}
    

在这个JavaScript代码块中，当animationClass动画执行完成时，它会被自动清除。这确保了只会播放一次动画。

综上所述，您可以通过简单地添加一行代码或使用JavaScript动态添加类名来防止CSS动画重复。希望这篇文章会对您有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！