CSS
CSS3

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

CSSのTransitionでアニメーションをさせた時に文字が一瞬チラつく現象に遭遇しました。
Gifだとわかりにくいですが、一瞬左右にカクカクとなっています。
chira.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プロパティについて知っておくべきこと