リールーブログ

IEでもたつくanimationをスムーズにするTips

Don't be shellfish...Tweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on TumblrShare on Facebook

cssのanimationで、fadeInを設定していたのですが、
ちょろめッチはスムーズだけど、
IEだけもたつく・・・・。
 

う゛う゛う゛
 




GPUで回避する!!

コードはこちら↓


.該当のクラス名 {transform: translate3d(0,0,0);}

 

該当のcssに上記transformを追加します。
これで、CPUでなくGPUで処理されるので、IEでもスムーズなFadeinになりました。
 

んがっしかしっっ
 

position制御ができない

bodyにtranslate3dを使ったら、
ナビゲーションバーのposition:fix;が効かない・・・。
 

う~ん・・・・
 

bodyに「translate3d」をかけたせいで、
headerにかけた「position:fix;」が効かないなら、
ページの見えている部分だけ、
「translate3d」をかけてみたらどうか?
 

成功です!!
 

親要素のbodyから、animation関連とtranslate3dを削除して、
子要素のheaderは、そのままposition:fix;を置いておく。
 

header下のページの見えている各要素に、
animation関連とtranslate3dをかける。
 

ちょっと手間ですが、
fadeinもtranslate3dもfixもほしい場合は、
今はこうするしかなさげ・・・・です。
 



page top