Firefox在悬停时重置动画 [英] Firefox resets animation on hover
问题描述
我使用基于以下代码的关键帧动画放置了纯CSS文本幻灯片： https：/ /codepen.io/johnlouie04/pen/BqyGb
I've put together a pure css text slideshow using a keyframe animation based on this code: https://codepen.io/johnlouie04/pen/BqyGb
我这样做，当您将鼠标悬停在过渡处时，它会暂停。这在谷歌浏览器和Safari完美地工作，但在Firefox上，只要你悬停滑块，动画就会在暂停之前快速重放。即使没有 animation-play-state：paused 行，也会发生这种情况。
I've made it so that when you hover the transition it pauses. This works perfectly in Google Chrome and Safari, but on Firefox whenever you hover the slider the animation replays really quickly before pausing. This occurs even without the animation-play-state:paused line.
滑块中还有另一个悬停选择器，也似乎导致动画重放。但是我删除了哪一个都没关系，只要滑块内有任何类型的悬停选择器（即使它与动画无关），Firefox会发生奇怪的事情。
There's also another hover selector in the slider which also seems to cause the animation to replay. But it doesn't matter which one I remove, as long as there's any type of hover selector anywhere within the slider (even if it's unrelated to the animation), Firefox makes strange things happen.
我已经搜索了年龄，找不到任何有相同问题的人。有人有任何想法如何解决这个？
I've googled for ages and can't find anybody with the same problem. Does anybody have any idea how to solve this? I would be immensely grateful for some help.
以下是代码：
<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>
推荐答案
code> s从 ul ，因为它们覆盖了Firefox中暂停的动画。 演示
Remove the transitions from the ul because they're overriding the paused animation in Firefox. Demo
旁注：您应该在之前的之前放置浏览器前缀属性，以便可以应用最标准的属性。这意味着它是
Side note: You should put browser prefixed properties before the unprefixed versions so that the most standard property can be applied. That means it'd be
-webkit-animation: ...;
animation: ...;
而不是
animation: ...;
-webkit-animation: ..;
此外，Firefox 支持从FF 15起的无前缀的动画，所以如果你想清理你的CSS，你可以删除该前缀一些和使它更小。
Also, Firefox has supported the unprefixed animation since FF 15, so you can drop that prefix if you'd like to clean up your CSS some and make it smaller.
这篇关于Firefox在悬停时重置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
