带有 href css 动画（横幅）的图像不起作用（仅在 FireFox 中）
Posted
技术标签:
【中文标题】带有 href css 动画（横幅）的图像不起作用（仅在 FireFox 中）【英文标题】：image with href css animation (banner) not working (only in FireFox) 【发布时间】：2016-11-14 14:05:17 【问题描述】：我正在使用 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
【问题讨论】：
Second 在 Firefox 开发者版中也不起作用！ @Vir 是的，这就是问题所在。 Firefox 中的动画只能在没有 href 的情况下工作。有什么想法吗？ 您可以将 标签替换为 onclick 事件，我在下面发布了一个演示。因此，您可以将 onclick 事件与图像一起使用，希望问题可以解决。 【参考方案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" 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" >
【讨论】：
【参考方案2】：动画最好设置在包装上，而不是每张幻灯片。
我修改了你的笔。删除浏览器前缀（现在很少需要它们），将动画移动到包装器，并将所有图像包装在锚点中。这里绝对不需要 JavaScript；
.bannerframe
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
适用于 Chrome、Firefox 和 Edge
http://codepen.io/anon/pen/grXgZJ
【讨论】：
我最终选择这个作为答案是因为它是一个更优化的解决方案。没有javascript，lesser css和sitll达到同样的效果。 备注：但此方法需要您精确计算横幅的长度，因此可能并不适合所有人以上是关于带有 href css 动画（横幅）的图像不起作用（仅在 FireFox 中）的主要内容，如果未能解决你的问题，请参考以下文章
jQuery在悬停时更改（带有淡入淡出动画）div的背景图像
css 样式中的背景图像在带有尾风的 laravel 中不起作用