图像重叠和动画

Question

尝试动画图像（使用class =“under”）并与静止图像重​​叠（使用class =“over”）。使用Firefox和IE-9浏览器，动画效果适用于较低的图像，而Chrome不显示动画。 Chrome会显示两张静止图像。 请解决任何问题。

---

.under
{
border-style: solid;
border-color: #0000ff;
border-radius:15px;
position: absolute;
left:173px;
top:0px;
z-index: 1;
}
.over
{
position:relative;
left:100px;
top:20px;
z-index: 2;
border-radius: 15px;
}


@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }

}

#animate-area   { 

        width: 1000px; 
        height: 160px; 

        background-image: url(images/img7.jpg);
        background-position: 0px 0px;
        background-repeat: repeat-x;
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */

    animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;

}

---

由于 阿南德

Answer 1

试试@ -webkit-keyframes animatedBackground

@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }

}

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }

}