如何在悬停和单击时切换 HTML/CSS 动画

Question

每当我将鼠标悬停在元素上或单击时，我都无法尝试停止和启动动画。这是我的 HTML 元素：<div class='marquee'>   <h1>Some Text</h1></div>CSS：.marquee {    width: 80%;    white-space: nowrap;    overflow: hidden;    box-sizing: border-box;}.marquee h1 {    display: inline-block;    padding-left: 100%;    animation: marquee 15s linear infinite;}@keyframes marquee {    0%   { transform: translate(0, 0); }    100% { transform: translate(-100%, 0); }}现在，动画默认情况下会永远持续下去。我怎样才能拥有它，以便每当我将鼠标悬停在或单击时，动画就会相应地暂停和恢复。我假设在单击时暂停/重新启动动画，我需要一个 JavaScript 函数。任何帮助表示赞赏。h1div

Answer 1

您可以使用animation-play-state规则：

.marquee {

    width: 80%;

    white-space: nowrap;

    overflow: hidden;

    box-sizing: border-box;

}

.marquee h1 {

    display: inline-block;

    padding-left: 100%;

    animation: marquee 15s linear infinite;

}

.marquee h1:hover {

    animation-play-state: paused;

}

@keyframes marquee {

    0%   { transform: translate(0, 0); }

    100% { transform: translate(-100%, 0); }

}

<div class='marquee'>

   <h1>Some Text</h1>

</div>

或者用JS：

function stopAnimation(e){

   if (e.target.style.animationPlayState == ""){

     e.target.style.animationPlayState = "paused";

   } else {

     e.target.style.animationPlayState = "";

   }

}

.marquee {

    width: 80%;

    white-space: nowrap;

    overflow: hidden;

    box-sizing: border-box;

}

.marquee h1 {

    display: inline-block;

    padding-left: 100%;

    animation: marquee 15s linear infinite;

}

@keyframes marquee {

    0%   { transform: translate(0, 0); }

    100% { transform: translate(-100%, 0); }

}

<div class='marquee'>

   <h1 onclick="stopAnimation(event)">Some Text</h1>

</div>

Answer 2

我建议使用 jquery 来更改动画属性。

$('.marquee').mouseenter(() => { $(this).css("animation: marquee 15s linear infinite"); } );

$('.marquee').mouseleave(() => { $(this).css("animation: none"); } );