1

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

1 回答 1

0

Maizere what you should do is add a jquery event listener for when a user hovers over the image, once that happens, change the play state rules in your .hs-wrapper img section to all say running. That is the best solution.

于 2013-01-12T22:06:07.510 回答