background-sizeのtransitionがIEでアニメーションしない

お題のとおりです。

/* IEでアニメーションで拡大しない */
a.hoge {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 300px 200px;
	-webkit-transition : 0.4s;
	-moz-transition    : 0.4s;
	-ms-transition     : 0.4s;
	transition         : 0.4s;
}

a.hoge:hover {
	background-size: 360px 240px;
}

マウスのhoverの時に背景を拡大しようと思い、background-sizeをtransitionで動かそうとすると、IEは上手く動いてくれないようです。IE11でも動かず……(おそらくbackground-sizeをtransitionで動かす機能を実装していない??)
Chrome、Safari、Firefoxは問題無く動作した。
というわけで、方法にてtransform:scale()を使って実装することにしました。

/* ※概念のみ */
a.hoge img {
	-webkit-transform: scale(1);
	-moz-transform   : scale(1);
	-ms-transform    : scale(1);
	transform        : scale(1);
	-webkit-transition : 0.4s;
	-moz-transition    : 0.4s;
	-ms-transition     : 0.4s;
	transition         : 0.4s;
}

a.hoge:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform   : scale(1.2);
	-ms-transform    : scale(1.2);
	transform        : scale(1.2);
}
カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


four × five =