css3停止循环动画

CSS3停止循环动画

/* 定义动画 */@keyframes my-animation {
0% {
     transform: translateX(0);
}
100% {
     transform: translateX(200px);
}
}
/* 把动画应用到元素 */.my-element {
    animation-name: my-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
/* 创建一个类来停止动画 */.stop-animation {
    animation-play-state: paused;
    /* 防止动画突然停止，将元素停止的位置作为其最终状态 */transform: translateX(200px);
}
    

如上所示，在CSS中定义动画名称和动画属性，然后将其应用到元素中。接着，创建一个类来停止动画，并使用animation-play-state: paused属性将其应用到元素中。最后，为了确保元素被停止在动画结束时的位置，需要为.stop-animation类添加一个transform属性。

当需要停止动画时，只需要使用JavaScript为元素添加.stop-animation类即可，例如：

var targetElement = document.getElementById("my-element");
    targetElement.classList.add("stop-animation");
    

这将为id为“my-element”的元素添加.stop-animation类，并使动画在最后一帧停止。

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