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

Thsi是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 Key-frame完全不同，但有点替代。

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

1 个答案: