文字をscaleを用いてのアニメーション時の文字ががたつく

Question

*html
<div>
    <p>TEST</p>
</div>

*css
test p {
    font-size: 20px;
    text-align: center;
    transform: scale(1.5);
    transition: all 1s;
}

上記のコードで文字を拡大表示した際、実際にはアニメーション終了時に文字ががたつきます。
こちらの対処法に困っています。

※環境がwindows / chrome です。
よろしくお願いいたします。

Answer 1

will-change: transform;を追加したらどうでしょうか。

will-change - CSS: カスケーディングスタイルシート | MDN

【CSS】アニメーション等動作がカクカクする時の対処法

Comments

[Ryu__ta]

ありがとうございます！解消しました！
助かりました！
ベストアンサーにさせていただきます。