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

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

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にすることで、背面を描画しなくなるので現象が収まります。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。