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>

这是一个fiddlehttps://jsfiddle.net/wilburlikesmith/4yzrpgco/2/

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

Answer 1

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

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

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

Answer 2

问题是你在移动第一张图片，你没有在所有图片上应用动画，我所做的是在 [=19= 上设置 class first ] 与 class photobanner，因此整行图像现在都在滑动，而不仅仅是第一张图像，Here is an updated fiddle。

希望对您有所帮助。

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

CSS Keyframe Animation Not Working in Firefox (I have looked at other answers)

html

css

slide

keyframe