0

このコードの何が問題になっていますか? Internet Explorer 10 または 11 では、ズーム トランジション効果は機能しません (他のブラウザーでは問題ありません)。

<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 トランジションは IE10/11 で動作するはず
です。私の間違いはどこですか?
ここでコードペンを作りました

4

1 に答える 1

1

background-size トランジション パーセンテージは IE でサポートされていないようです。奇妙な...だから、Percentage background-size の代わりに SCALE を使用します。正しいコードは次のとおりです。

<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 */ 
}

そして更新されたCodepenはこちら

于 2014-02-18T10:52:23.913 に答える