css - 背景动画图像在 IE 和 Opera 浏览器中不起作用

Question

这是我的CSS代码:

body {
        margin: 0;
        padding: 0;
    }
    #slideshow {
        position: relative;
        overflow: hidden;
        height: 100px;
    }
 #fixme
{

    height : 60px;
    position: relative;
    overflow : hidden;
}
    #animate-area { 
        height: 122%;
        width: 2538px;
        position: absolute;
        left: 0;
        top: -15px;
        background-image: url('http://s30.postimg.org/qnju89rkx/banner.png') ;
        -ms-animation: animatedBackground 40s linear infinite;
        -moz-animation: animatedBackground 40s linear infinite;
        -webkit-animation: animatedBackground 30s linear infinite;
    }
    /* Put your css in here */
    @keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-webkit-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }
    @-moz-keyframes animatedBackground {
        from { left: 0; }
        to { left: -1269px; }
    }

这是 JSfiddle:http://jsfiddle.net/cz04c4nx/8/

现在它在 chrome 和 mozilla 浏览器中运行良好，但在 IE 和 Opera 中无法运行动画。

请问是什么原因？以及如何解决这个问题？

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我不确定，但我想你忘记了什么。试试下面的代码。 将您的 #animate-area div 替换为:

 #animate-area { 
    height: 122%;
    width: 2538px;
    position: absolute;
    left: 0;
    top: -15px;
    background-image: url('http://s30.postimg.org/qnju89rkx/banner.png') ;
    animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 30s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -o-animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;  
}

不同之处在于动画标签。之后，在您的 CSS 底部添加以下内容。

    @-ms-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}

  @-o-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}

IE8 中的动画。将以下行复制到您网站的头部部分。如果用户浏览器低于 IE10，则将加载 jQuery 动画。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--[if lt IE 10]>
<script> 

    $(document).ready(function(){
        $("#animate-area").animate({left:'-1269px'}, 40000, function() {});
    });
    </script> 
    <![endif]-->

它看起来并不完全像 CSS3 关键帧，但有一点替代。