html - 图像重叠和动画

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