CSSアニメーションで要素が一瞬伸縮したりちらつく場合の対処法

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:hidden;
}

これで現象は収まるはずです。上記を追加してもダメな場合は、「overflow:hidden;」も追加してみましょう。

あとがき

backface-visibilityプロパティは、変形した要素の背面の表示方法を指定します。初期値はvisibleになっていて、前面の要素が変形した場合も背面を描画します。この仕様によって、要素が伸縮したりちらついて見えてしまうというわけです。値をhiddenにすることで、背面を描画しなくなるので現象が収まります。