空の回廊 - 時々web・創作系 -

独りよがりなWebLog(たまにTemporary)

IEでhoverでbackgroundが効かない(動かない)対策

今まで適当だったanimationの勉強をして、スマートじゃないかったとあるコードを修正する事に。

すると、firefoxchromeでは動くのに、IEだけ動かない い.つ.も.の 現象に...
webに携わってる人なら幾度となく出会うシーンですね^^(イライラ…)

そしてIEだけNGだった件の解決策は、アニメーション前の背景cssをa{}のところにも入れたら解決しました。(元々見えない位置に置いてるからネ)
(ここまでの時間が…)

元々のコードは:afterにimgで画像をpositionで置いてhover時に下からニュッと動かすってやつ…だったような。。
そのままtranslateとbackgroundに変えて出来そうだけど、勉強中でまだパッとコードが浮かばないので…animationでやりました。

li a{background: url(~~~) center  <最初に置く位置をpx等で指定> no-repeat; /* ←コレ */}
li a:hover{
animation-name: hoverani;
animation-duration: 0.1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards; /* 一括指定しても良いかも。でもIEで動かない可能性もあるらしい */
}

@keyframes hoverani {
  0%{background: url(~~~) center  <最初に置く位置をpx等で指定> no-repeat;}
  100%{background: url(~~~) center  <最終位置をpx等で指定> no-repeat;}
}