圖像重疊和動畫

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; } 

}