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部分中的播放状态规则改为所有说运行。这是最好的解决方案。

需要有关css3动画播放状态的最新帮助

1 个答案: