お題のとおりです。
/* 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); }