背景动画影像不是在IE和Opera浏览器的工作

这是我的CSS代码：背景动画影像不是在IE和Opera浏览器的工作

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/

现在，它的工作在浏览器和Mozilla浏览器的罚款，但没有IE和Opera中的工作动画。

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

任何帮助，将不胜感激。提前致谢。

来源

2014-09-02 sasi

有人可以帮我吗？ – sasi 2014-09-02 04:49:50

对我来说，你的jsfiddle例子在IE10和Opera 20.0.1387.91中都很出色。看看这个：http：//caniuse.com/#feat=css-animation – 2014-09-02 05:01:43

上面提供的链接告诉你CSS3 Animation支持的每个浏览器的版本。您可以查看只有IE10和更高版本支持动画。 – 2014-09-02 05:17:31

我不确定，但我想你忘记了一些东西。尝试下面的代码。这个替换您#animate-area格：

#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关键帧，但有点替代。

来源

2014-09-02 05:13:57

你有什么版本的Opera和IE？ – 2014-09-02 05:25:09

背景动画影像不是在IE和Opera浏览器的工作

回答

相关问题