I put together a pure slide show with css text using a keyframe animation based on this code: https://codepen.io/johnlouie04/pen/BqyGb
I made it so that when you make the transition, it stops. This works fine in Google Chrome and Safari, but in Firefox, whenever you hover over a slider, the animation replayes very quickly before pausing. This happens even without the string animation-play-state:paused .
There is another rotation selector in the slider that also makes the animation play. But no matter which one I delete, if there is any type of hover selector anywhere in the slider (even if it is not related to animation), Firefox does strange things.
I searched Google for a long time and could not find anyone with the same problem. Does anyone know how to solve this? I would be very grateful for the help.
Here is 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>
source share