CSS 关键帧动画在 Firefox 中不起作用（我看过其他答案）

Question

我有同样的问题 (CSS Keyframe animation working in Chrome, but not FF (or IE))，不同的动画。

我发现删除引号可以在 IE 中工作，但在 Firefox 中仍然不行。

<div class="media24-titles">
    <div class="photobanner">

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img class="first" src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

<a href="http://www.media24.com/en/newspapers.html" target="_blank"><img src="http://www.legends24.co.za/wp-content/logos/03.jpg" alt=""></a>

    </div>
</div>

<style type="text/css">

.photobanner {
height: 60px;
width: 10300px;
margin-bottom: 0px;
overflow:hidden;
}

.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

/*keyframe animations*/

.first {
-webkit-animation: bannermove 120s linear infinite;
-moz-animation: bannermove 120s linear infinite;
-ms-animation: bannermove 120s linear infinite;
-o-animation: bannermove 120s linear infinite;
animation: bannermove 120s linear infinite;
}

@keyframes bannermove {
0% {
    margin-left: 0px;
}
100% {
    margin-left: -9125px;
}
}

@-moz-keyframes bannermove {
0% {
    margin-left: 0px;
}
100% {
    margin-left: -9125px;
}
}

@-webkit-keyframes bannermove {
0% {
    margin-left: 0px;
}
100% {
    margin-left: -9125px;
}
}

@-ms-keyframes bannermove {
0% {
    margin-left: 0px;
}
100% {
    margin-left: -9125px;
}
}

@-o-keyframes bannermove {
0% {
    margin-left: 0px;
}
100% {
    margin-left: -9125px;
}
}
</style>

这是一个小提琴https://jsfiddle.net/wilburlikesmith/4yzrpgco/2/

我确实注意到了 :first-child、:nth-child(2) 和 :nth-child(3) 的使用，我真的希望这不是问题，我有很多很多徽标要显示...

Answer 1

关键帧动画在 Firefox 中有效，但问题是您只移动了一张图像 (.first)，因此一旦该图像移出视口，其他图像就会停止移动。

其他图像移动的事实仅仅是因为它们是内联元素，并且随着第一张图像的移动，它们也随之移动。

如果将动画应用于包含所有图像的元素 (.photobanner)，效果可能会更好。

Answer 2

问题是您正在移动第一张图像，您没有在所有图像上应用动画，我所做的是在具有类photobanner 的 div 上设置类 first，因此整行的图像现在正在滑动，而不仅仅是第一张图像Here is an updated fiddle。

希望这会有所帮助。