I've put together a pure css text slideshow using a keyframe animation based on this code: https://codepen.io/johnlouie04/pen/BqyGb
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.
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.
Here's the code:
<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>
Remove the
transitions from theulbecause they're overriding the paused animation in Firefox. DemoSide 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
instead of
Also, Firefox has supported the unprefixed
animationsince FF 15, so you can drop that prefix if you'd like to clean up your CSS some and make it smaller.