图像重叠和动画

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-关键帧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; } 

}