以下是一个示例代码,用于避免在鼠标离开时重置动画:
HTML代码:
CSS代码:
#box {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
JavaScript代码:
var box = document.getElementById('box');
var animation;
function startAnimation() {
box.style.animationPlayState = 'running';
}
function stopAnimation() {
box.style.animationPlayState = 'paused';
}
在上面的代码中,我们定义了一个startAnimation()
函数和一个stopAnimation()
函数。当鼠标悬停在#box
元素上时,会调用startAnimation()
函数,将动画的animation-play-state
属性设置为running
,使动画继续运行。当鼠标离开#box
元素时,会调用stopAnimation()
函数,将动画的animation-play-state
属性设置为paused
,使动画停止在当前位置。这样,鼠标离开时动画就不会重置了。