Firefox在悬停时重置动画

Question

Firefox在悬停时重置动画

nic*_*ayz 6 css firefox css3 pausing-execution css-animations

我使用基于此代码的关键帧动画整理了一个纯css文本幻灯片:https://codepen.io/johnlouie04/pen/BqyGb

我已经做到这一点,当你悬停过渡时,它会暂停.这在谷歌浏览器和Safari中完美运行,但是在Firefox上悬停滑块时,动画会在暂停前快速重放.即使没有animation-play-state:paused线也会发生这种情况.

滑块中还有另一个悬停选择器,它似乎也会导致动画重放.但是我删除哪一个并不重要,只要滑块内任何类型的悬停选择器(即使它与动画无关),Firefox会发生奇怪的事情.

我已经google了很长时间,找不到任何有同样问题的人.有谁知道如何解决这个问题？我会非常感激一些帮助.

这是代码:

<html>
<body>
<style>
#slider {
    overflow: hidden;
    position: relative;    
    width: 920px;
    z-index: 0;
    margin: 0 auto;
    padding: 0;
}
#slider li {
    float: left;
    position: relative;
    display: inline-block;
    margin: 0px;
}
#slider-margin {
    margin: 50px 0px;
    padding: 0px;
    border-radius: 8px;
    border-bottom: 3px solid rgba(0,10,30,0.1);
    position: relative;
    background: rgba(0,10,30,0.2);
}
#slider li {
    float: left;
    position: relative;
    display: inline-block;
    margin: 0px;
}
#slider ul {
    list-style: none;
    position: relative;
    left: 0px;
    top: 0px;
    width: 9000px;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {  
#slider ul:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}
#slider-margin:hover {
    background: rgba(0,10,30,0.3);
}
}
.slider-container {
    margin: 0 auto;
    padding: 10px 30px;
    width: 860px;
}
#slider h1 {
    font-size: 45px;
    color: #fff;
    text-shadow: rgba(0,10,30,0.7) 0px 1px 3px;
    display: block;
}
#slider p {
    line-height: 150%;
    font-size: 20px;
    color: #fff;
    text-shadow: rgba(0,10,30,0.7) 0px 1px 3px;
    display: block;
}    
#slider ul {
    animation: slide-animation 12.5s infinite;
    -webkit-animation: slide-animation 12.5s infinite;
    -moz-animation: slide-animation 12.5s infinite;
}
@keyframes slide-animation {
    0% {left: 0px; opacity: 0;}
    5% {opacity:1;}
    40% {left:0px; opacity:1;}
    45% {opacity: 0.5;}
    50% {left:-920px; opacity:1;}
    90% {left:-920px; opacity:1;}
    97% {left:-920px; opacity:0;}
    100% {left: 0px; opacity: 0;}
}
@-webkit-keyframes slide-animation {
    0% {left: 0px; opacity: 0;}
    5% {opacity:1;}
    40% {left:0px; opacity:1;}
    45% {opacity: 0.5;}
    50% {left:-920px; opacity:1;}
    90% {left:-920px; opacity:1;}
    97% {left:-920px; opacity:0;}
    100% {left: 0px; opacity: 0;}
}
@-moz-keyframes slide-animation {
    0% {left: 0px; opacity: 0;}
    5% {opacity:1;}
    40% {left:0px; opacity:1;}
    45% {opacity: 0.5;}
    50% {left:-920px; opacity:1;}
    90% {left:-920px; opacity:1;}
    97% {left:-920px; opacity:0;}
    100% {left: 0px; opacity: 0;}
}
</style>
<div id="slider">
<div id="slider-margin">
<ul>
<li>
<a href="#">
<div class="slider-container">
<h1>blablabla</h1>
<p>blablabla</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="slider-container">
<h1>blablabla</h1>
<p>blablabla.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Zac*_*ier 2

transition从中删除s ul，因为它们会覆盖 Firefox 中的暂停动画。演示

旁注：您应该将浏览器前缀属性放在无前缀版本之前，以便可以应用最标准的属性。这意味着它会是

-webkit-animation: ...;
animation: ...;

Run Code Online (Sandbox Code Playgroud)

代替

animation: ...;
-webkit-animation: ..;

Run Code Online (Sandbox Code Playgroud)

此外，Firefox从 FF 15 开始就支持无前缀animation，因此如果您想清理 CSS 并使其更小，可以删除该前缀。

归档时间：	10 年，10 月前
查看次数：	456 次
最近记录：	10 年，10 月前