6

我已经使用基于此代码的关键帧动画制作了一个纯 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>
4

1 回答 1

2

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

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

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

代替

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

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

于 2014-11-27T00:09:53.290 回答