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

我有同样的问题（），不同的动画

我发现删除引号可以在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>

.photobanner{
高度：60px；
宽度：10300px；
边缘底部：0px；
溢出：隐藏；
}
.摄影旗帜{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.photobanner img：悬停{
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
光标：指针；
-webkit盒阴影：0px 3px 5px rgba（0,0,0,0.2）；
-moz盒阴影：0px 3px 5px rgba（0,0,0,0.2）；
盒影：0px 3px 5px rgba（0,0,0,0.2）；
}
/*关键帧动画*/
.首先{
-webkit动画：bannermove 120s线性无限；
-moz动画：bannermove 120s线性无限；
-ms动画：bannermove 120s线性无限；
-o动画：bannermove 120s线性无限；
动画：bannermove 120s线性无限；
}
@关键帧横幅移动{
0% {
左边距：0px；
}
100% {
左边距：-9125px；
}
}
@-moz关键帧bannermove{
0% {
左边距：0px；
}
100% {
左边距：-9125px；
}
}
@-webkit关键帧bannermove{
0% {
左边距：0px；
}
100% {
左边距：-9125px；
}
}
@-ms关键帧bannermove{
0% {
左边距：0px；
}
100% {
左边距：-9125px；
}
}
@-o-关键帧横幅移动{
0% {
左边距：0px；
}
100% {
左边距：-9125px；
}
}

这是一把小提琴

---

我确实注意到了：first child、：nth child（2）和：nth child（3）的使用，我真的希望这不是问题，我有很多徽标要显示…

关键帧动画在Firefox中工作，但问题是您只移动一个图像（

.first

），因此，一旦该图像移出视口，其他图像将停止移动

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

---

如果您将动画应用于包含所有图像的元素（

.photobanner

），效果可能会更好。

问题是您正在移动第一个图像，您没有在所有图像上应用动画，我所做的是在div上使用类

photobanner

设置类

first

，因此，整行图像现在正在滑动，而不仅仅是第一个图像

---

希望这能有所帮助。

使用此功能的品牌代码。过时，@SarowerI应该想到这一点…：/谢谢，从你第一个就给了你答案。谢谢卡里姆，自从@Jonathan_Nicol的帖子是第一个，我不得不给他答案，但是谢谢你的帮助：）