Edited at

CSSアニメーション時のチラつきを解決する方法

More than 1 year has passed since last update.

CSSのTransitionでアニメーションをさせた時に文字が一瞬チラつく現象に遭遇しました。

Gifだとわかりにくいですが、一瞬左右にカクカクとなっています。

ネットで調べると該当のセレクタに下記を追記することで、大体の場合解決するとありましたが僕の場合改善しませんでした。

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

結果的にwill-changeプロパティを追記することで改善されました🎉

.hoge:hover > img {

height: 300px;
width: 300px;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: transform; /* ←追記分 */
}

参考

CSS will-changeプロパティについて知っておくべきこと