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



Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact