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

这是一把 fiddle https://jsfiddle.net/wilburlikesmith/4yzrpgco/2/

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

Answer 1

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

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

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