带有 href css 动画（横幅）的图像不起作用（仅在 FireFox 中）

Question

我正在使用 CSS 关键帧和动画制作自动滚动横幅（Keyframe 移出 margin，例如 @keyframes teammove { 0% { margin-left: 0px; } 100% { margin-left: -1200px; }）。不幸的是，它在 Firefox 中不起作用。

我测试了不同大小div和溢出设置，最终发现是<a href = ""> </a>标签的问题。

这里是横幅的工作（没有 href）和非工作（有 href）版本。任何解决方案都会有所帮助。

工作版本：http://codepen.io/andy897221/pen/oLogXO

非工作版本：http://codepen.io/andy897221/pen/XKzNYm

Answer 1

您可以尝试使用 javascript onclick 事件先调用图像，然后再调用图像调用函数，例如，

 <!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>

使用喜欢，

    <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">

Answer 2

最好在包装纸上设置动画，而不是在每张单独的幻灯片上设置。

我修改了你的笔。删除了浏览器前缀（现在很少需要它们），将动画移到包装器中，并将所有图像包装在锚点中。这里绝对不需要JavaScript；

.bannerframe {
  width: 3000px;
  height: 200px;
  animation: teammove 5s linear infinite;
}

适用于 Chrome、Firefox 和 Edge

http://codepen.io/anon/pen/grXgZJ

带有 href css 动画（横幅）的图像不起作用（仅在 FireFox 中）

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

html

css

firefox

href

css-animations