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