I am using CSS keyframe and animation to make an auto-scroll banner (with Keyframe move out of margin e.g. @keyframes teammove { 0% { margin-left: 0px; } 100% { margin-left: -1200px; }). Unfortunately it doesnt work on in firefox.
I tested with different size div and overflow setting, and eventually found it is the problem of the <a href = ""> </a> tag.
Here are both working (without href) and non-working (with href) version of banner. Any solution would be helpful.
Working version: http://codepen.io/andy897221/pen/oLogXO
non-working version: http://codepen.io/andy897221/pen/XKzNYm
The animation would be better set on the wrapper, rather than each individual slide.
I've modified your pen. Removed the browser prefixes (they're rarely needed these days), moved the animation to the wrapper, and wrapped all the images in anchors. There's absolutely no need for JavaScript here;
.bannerframe {
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
}
Works in Chrome, Firefox and Edge