需要有关 css3 动画播放状态的当前帮助答案

【问题标题】：Need current help on css3 animation-play-state需要有关 css3 动画播放状态的当前帮助
【发布时间】：2013-01-13 06:06:07
【问题描述】：

我只需要知道动画是否更改了在动画发生之前定义的原始 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;
    }
}

【问题讨论】：

请准确一点，尽量写出好的英文。还可以使您的代码更具可读性。我编辑了您的文本和代码。

标签： css

【解决方案1】：

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

【讨论】：