背景動畫影像不是在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瀏覽器的工作

回答

相關問題