【CSSアニメがガタつく】Safari（iPhone/iPad）でtransform・filter使用時のカクつきはwill-changeで滑らかになるよ！

サイト制作2025.05.11

jQueryとCSSでアニメーションするアイテムをページで使ったところ。
PCのChromeブラウザでは何ともないのに、iPhone、iPadで何故かカクカクになってしまう。
少し調べてみると、will-changeを書けば解決しました。

解決結果

結果から書くと、以下の2行目

.anime{
 will-change: transform;
 transform: rotateY(-360deg);
 animation-iteration-count:1;
 animation-duration:3.5s;
}

will-change: transform;
を一番上のプロパティに追加する事でカクつきは消えました。

参考サイト：
CSS will-changeプロパティについて知っておくべきこと | POSTD

上記のサイトに詳しくかかれていますが、追加したwill-changeは、どのような変更を加えるかを前もってブラウザに知らせておく、という機能があるプロパティです。

私の場合は、transformを使うので、
will-change: transform;
としています。
なので、transform以外が原因の場合、その（スムーズに動いていない）プロパティを書くという事になります。
filter: blur(250px);等でカクつくときは、will-change: filter;となります。