需要css3动画播放状态的当前帮助吗

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

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

一切都进行得很顺利，但突然我注意到，如果动画更改了原始css值，那么之前设置为“暂停”的动画播放状态也应该在出现悬停在图像上时永久更改，然后继续播放动画。但动画仅在悬停状态下播放！为什么?

HTML

---

Maizere您应该做的是为用户悬停在图像上时添加一个jquery事件侦听器，一旦发生这种情况，请将.hs wrapper img部分中的播放状态规则更改为all say running。这是最好的解决办法。

请更准确地写下好的英语。还可以提高代码的可读性。我编辑了你的文本和代码。@Bram Vanroy一切都很好，该编辑什么…我只是想知道在div上出现悬停后，动画应该继续播放，不仅是在悬停状态，而且是连续播放

<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>

.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;
    }
}