transitionやtransformでCSSアニメーションを要素にかけた時に、要素の幅が一瞬だけ伸縮してしまったり、ちらついてしまう場合があります。私もよく以下のようなCSSを指定することがあるのですが、アニメーション時に画像が一瞬だけ伸縮してしまうことがあります。 a img{ transition:all .3s ease-in-out; } a:hover img{ opacity:0.8; } このような現象を対処するための方法をご紹介したいと思います。 CSSアニメーションで要素が一瞬伸縮したりちらついたりする場合の対処法 要素が伸縮したりちらついてしまう現象が発生する場合は、アニメーションを指定している要素に対して、以下のCSSを追加します。 a img{ -webkit-backface-visibility:hidden; backface-visibility:hid
![CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法 | TechMemo](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e5c67cfdcb2dc706cc4064306314e3448efbf97/height=288;version=1;width=512/https%3A%2F%2Ftechmemo.biz%2Fwp-content%2Fuploads%2F2017%2F04%2Fbackface-visibility.jpg)