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）我真的希望不是问题，我有很多很多徽标要显示...... < / p>

Answer 1

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

其他图像完全移动的事实仅仅是因为它们是内联元素，并且当第一个图像移动时，它们与内部元素一致。

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

Answer 2

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

希望这有帮助。

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

2 个答案: