忍者ブログ
28 March

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

15 May

IE11 transform animation ガタつく

background-size:cover の背景画像をanimationで拡大
IE11のみガタガタぶるぶるする

transform:matrixで拡大してたんだが、何やっても治んないのでイライラしてscaleにしたら同じ動きだったのでscaleにした

【css3】IE11で transform :scale()などのアニメーションがカクつく時の対処法
https://sakatamemo.info/css/419/
↑とてつもないありがたいコード
animation keyframe内の拡大後の100%のtransformに rotate(0.1deg);を追加したら出来た!!!
100%{
transform: scale(1.5) rotate(0.1deg); 効果あり!!!!!

}


背景指定しているdivに
will-change: transform; 効果なし
 transform: rotate(0.0001deg); 効果なし
 transform: translate3d(0,0,0); 効果なし
backface-visibility:hidden; 効果なし

hoverとかのときは上の指定で上手くいったことも何度かあったため、
今回はanimationなので、keyframe内で一緒にちょびrotateを指定しないといけなかったっぽいのか?
ん、ていうかhoverのときはtransitionだからhover対象で微調整rotateとかつけるよな…
そうするとkeyframe内にrotateをつけるのは順当なのか…

どちらにせよもうIEまじしねよほんと
PR