Firefox resets animation on hover

Question

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>

works fine i think try again after clear firefox cache. – Jaiff Nov 26 '14 at 21:55 — Jaiff, Nov 26 '14 at 21:55

Zach Saucier · Answer 1 · 2014-11-27T00:22:54.240

2

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: ...;

instead of

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

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.

edited Nov 27 '14 at 00:22

answered Nov 27 '14 at 00:09

Zach Saucier

24,871
12
85
147

Aaaah, so obvious. And so annoying :D. Thank you so much!! – nicedayz Nov 27 '14 at 16:38
@nicedayz If an answer helps you solve your problem, you can mark it as Accepted by clicking the check mark to the left of the answer. Doing so will give both people some reputation :) – Zach Saucier Nov 28 '14 at 13:33

Firefox resets animation on hover

1 Answers1

Linked