我想制作简单的文字动画。当我单击一个按钮时，文本从完全透明变为完全可见，然后恢复为透明。我编写了执行动画的代码，但只编写了一次。每次单击按钮时动画不再工作:
function animation() {
$("span").removeClass("opacity-effect");
$("span").addClass("opacity-effect");
}span{
opacity: 0;
}
.opacity-effect {
animation-name: animate-opacity-effect;
animation-duration: 1400ms;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animate-opacity-effect {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Hello World!</span>
<button onClick="animation()">
Start animation
</button>最佳答案
动画不会重复，因为要启动动画，CSS 需要在没有类时有帧。
因此，要解决这个问题，您应该延迟将类添加到下一帧
function animation() {
$("span").removeClass("opacity-effect");
requestAnimationFrame(()=>{
$("span").addClass("opacity-effect");
});
}
https://stackoverflow.com/questions/66687063/