让动画在鼠标离开时完成

Question

我写了鼠标悬停的关键帧动画。

@keyframes juggle {
    0%{ transform: skew(15deg, 15deg) translate(0,10px);}
    50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
    100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
span:hover{ animation: juggle 1s; }

动画效果很好，但在鼠标离开时突然停止。期望即使在鼠标离开时也能完成动画。

没有jquery可以吗。

Answer 1

我相信这是你想做的事情

span {
  animation-name: juggle-out;
    animation-duration: 1s;
    animation-repeat-count: 1;
    animation-fill-mode: forwards;

}
span:hover{
  animation-name: juggle-in;
}
@keyframes juggle-in {
    0%{ transform: skew(15deg, 15deg) translate(0,10px);}
    50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
    100%{ transform: skew(15deg, 15deg) translate(0,0);}
}

@keyframes juggle-out {
    0%{ transform: skew(15deg, 15deg) translate(0,10px);}
    50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
    100%{ transform: skew(0deg, 0deg) translate(0,0);}
}

你应该为 hover in 和 hover out 使用 2 个动画实际上 CSS 中没有 hover in 和 hover out 这只是一个状态，但 animation-fill-mode 起着重要的作用虽然支持不是很好 ;) 我建议添加 class 而不是这个

Answer 2

使用 onmouseover 函数添加包含动画的 class 并使用 settimeout 函数手动删除 class。

Answer 3

希望这有效

let section = document.getElementById('homeSection');
let elmnt = section.getElementsByClassName('classname');

for (let i = 0; i < elmnt.length; i++) {
    elmnt[i].addEventListener('mouseenter', function () {
        elmnt[i].classList.add('Juggle');
        setTimeout(function(){
            elmnt[i].classList.remove('Juggle')
        },400)
    })
}

让动画在鼠标离开时完成

To let the animation complete on mouse leave

html

css

hover

keyframe

css-animations