Firefox 在悬停时重置动画答案

【问题标题】：Firefox resets animation on hoverFirefox 在悬停时重置动画
【发布时间】：2014-11-27 08:22:54
【问题描述】：

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

我已经做到了，当您悬停过渡时，它会暂停。这在 Google Chrome 和 Safari 中完美运行，但在 Firefox 上，只要您将滑块悬停，动画就会在暂停前快速重播。即使没有animation-play-state:paused 行，也会发生这种情况。

滑块中还有另一个悬停选择器，它似乎也会导致动画重播。但是我删除哪一个并不重要，只要在滑块内的任何位置有任何类型的悬停选择器（即使它与动画无关），Firefox 都会发生奇怪的事情。

我已经用谷歌搜索了很长时间，但找不到遇到同样问题的人。有谁知道如何解决这个问题？如果能得到一些帮助，我将不胜感激。

代码如下：

<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>

【问题讨论】：

工作正常，我想在清除 Firefox 缓存后重试。

标签： css firefox css-animations pausing-execution

【解决方案1】：

从ul 中删除transitions，因为它们覆盖了Firefox 中的暂停动画。 Demo

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

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

而不是

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

此外，自 FF 15 以来，Firefox has supported 无前缀 animation，因此如果您想清理一些 CSS 并使其更小，可以删除该前缀。

【讨论】：

啊啊，太明显了。太烦人了：D。非常感谢！！
@nicedayz 如果某个答案可以帮助您解决问题，您可以通过单击答案左侧的复选标记将其标记为已接受。这样做会给两个人一些声誉:)