Question

我使用基于此代码的关键帧动画整理了一个纯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>

Answer 1

从transition中移除ul，因为它们会覆盖Firefox中暂停的动画。 Demo

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

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

而不是

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

此外，Firefox has supported是自FF 15以来没有前缀的animation，所以如果您想清理一些CSS并将其缩小，可以删除该前缀。

Firefox在悬停时重置动画

1 个答案: