css3元素无法在IE9上工作

我知道在IE9中，我可以在div中添加多个图像，并且可以在IE9中使用background-position和background-image。但我的代码不起作用，当点击一个div时，我看不到动画向下滚动。为什么？这是代码：（在Firefox和Chrome正常工作）css3元素无法在IE9上工作

DEMO

HTML：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var bg = $('.second').css('background-image'); 
    $('.second').css('background-image',bg+', url(http://www.dummyimage.com/643x12/001aff/ffffff.png)'); 
    $('.second').css('background-position', '0 0px, 0 -100px'); 


    $(".second").on("click", function() { 
     $(".second").css('background-position', '0 200px, 0 100px'); 
    }); 

}); 

</script> 
</head> 
<body> 
<div class="second"> 

</div>

CSS：

.second{ 
    position: absolute; 
    border: solid; 
    top:0; 
    left:0; 
    z-index: 2; 
    height: 100%; 
    width: 1000px; 
    overflow: hidden; 
    background:url(http://www.dummyimage.com/643x12/001aff/ffffff.png) no-repeat; 

    transition-property: background-position; /*standard*/ 
    transition-duration: 1s; 

    -webkit-transition-property: background-position; /*Safari e Chrome */ 
    -webkit-transition-duration: 1s; 

    -o-transition-property: background-position;  /*Opera*/ 
    -o-transition-duration: 1s; 

    -moz-transition-property: background-position; /*Firefox*/ 
    -moz-transition-duration: 1s; 

}

来源

2012-10-29 Alessandro Minoccheri

转变不会在IE9工作。只有现代浏览器，最后是IE10。

来源

2012-10-29 14:07:35 Rob

好但我认为IE9支持转换不是？ –

如何解决？有动画？ –

@AlessandroMinoccheri - http://caniuse.com/#search=transition – Rob

css3元素无法在IE9上工作

回答

相关问题