background-size transition doen't work in IE10/11

问题:

What's wrong with this code? The zoom transition effect doesn't work in Internet Explorer 10 or 11 (OK in other browsers).

<div class="image"></div>  .image {     width:300px;     height:200px;     background: url("http://lorempixel.com/300/200");     background-position:center;     background-size:100%;     transition: background-size 1s ease;     -moz-transition: background-size 1s ease;     -o-transition: background-size 1s ease;     -webkit-transition: background-size 1s ease; }  .image:hover {      background-size:150%; } 

background-size transition should work with IE10/11 as I see here
Where is my mistake?
I made a Codepen here

回答1:

It seems that background-size transition percentage is not supported by IE. Wierd... So we'll use SCALE instead of Percentage background-size. Here is the right code:

<div class="image-box">     <div class="image">     </div> </div>    .image-box{     width:300px;     overflow:hidden; } .image {     width:300px;     height:200px;     background: url("http://lorempixel.com/300/200");     background-position:center;     transition: all 1s ease;     -moz-transition: all 1s ease;     -ms-transition: all 1s ease;     -webkit-transition: all 1s ease;     -o-transition: all 1s ease; }  .image:hover {     transform: scale(2);     -moz-transform: scale(2);     -webkit-transform: scale(2);     -o-transform: scale(2);    -ms-transform: scale(2); /* IE 9 */     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand')"; /* IE8 */     filter: progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand'); /* IE6 and 7 */  } 

And the updated Codepen here

文章来源: background-size transition doen't work in IE10/11