Andy Andy - 4 months ago 17
HTML Question

image with href css animation (banner) not working (only in FireFox)

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

Vir Vir
Answer

You can try to use javascript onclick event with image first and with image second calling function like,

 <!DOCTYPE html>
  <html>
   <body>

   <p>Click the button to set the href value to http://www.google.com.</p>

    <button onclick="myFunction()">Take me to google.com</button>

     <script>
       function myFunction() {
       location.href = "http://www.google.com";
      }
     </script>

    </body>

Use like,

    <img onclick="myFunction()" src="http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg" width="300" height="200" class="firstimg">
    <img onclick="myFunction()" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="300" height="200">