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

2016.12.04

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もほしい場合は、
今はこうするしかなさげ・・・・です。