css - 需要有关 css3 animation-play-state 的当前帮助

Question

我只需要知道动画是否更改了在动画发生之前定义的原始 css 值？

据我所知，答案是是，但我有一个问题。我在一个 div 中放置了一个图像，我只想在它悬停时在其上运行动画。在图像中设置为“暂停”的动画播放状态帮助我停止动画，直到图像上发生悬停。悬停图像时，动画播放状态设置为“运行”。

一切都很顺利，但突然我注意到，如果动画改变了原始的 css 值，那么当悬停在图像上时，先前设置的动画播放状态也应该永久更改为“暂停”，然后继续播放动画.但是动画只在悬停状态下播放!为什么？

HTML

<div class="hs-wrapper">
    <img src="i.jpg" alt="image01"/>
    <img src="a.jpg" alt="image01"/>
    <img src="c.jpg" alt="image03"/>
    <img src="d.jpg" alt="image04"/>
    <img src="e.jpg" alt="image05"/>
    <img src="f.jpg" alt="image06"/>
</div>

CSS

.hs-wrapper img {
    width: 333px;
    height: 500px;
    top: 0px;
    left: 0px;
    position: absolute;
    -webkit-animation: showMe 0.8s linear infinite 0s forwards;
    -moz-animation: showMe 0.8s linear infinite 0s forwards;
    -o-animation: showMe 0.8s linear infinite 0s forwards;
    -ms-animation: showMe 0.8s linear infinite 0s forwards;
    animation: showMe 0.8s linear infinite 0s forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}

.hs-wrapper:hover img {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}

@-moz-keyframes showMe {
    0% {
        visibility: visible;
        z-index: 100;
    }

    12.5% {
        visibility: visible;
        z-index: 100;
    }

    25% {
        visibility: hidden;
        z-index: 0;
    }

    100% {
        visibility: hidden;
        z-index: 0;
    }
}

Answer 1

Maizere 你应该做的是添加一个 jquery 事件监听器，当用户将鼠标悬停在图像上时，一旦发生，将 .hs-wrapper img 部分中的播放状态规则更改为全部运行。这是最好的解决方案。