CSSのanimation。
2026年7月追記：この記事は、2021年当時のiOS版Chromeで実機確認した時の記録です。
CSSの animation、transition、transform 自体は今もよく使いますが、実際の見え方はOS、ブラウザ、端末で差が出ます。
今から同じような症状を見る場合は、MDNのCSS animations、transition、transformを確認しつつ、対象端末での実機確認を前提にした方がよさそうです。
昔は要素を動かすにはjQueryのanimateばかり使っている時期がありましたが、JavaScriptは多用しすぎると動作が重くなってしまう。
CSSのanimationを使えばそれが改善されるということで、知った時には感動したものです。
それ以降は要素を動かす際には、まずCSSのanimationで考え、JavaScriptと併用して実現する……という流れとしています。
さてさて、このCSSアニメーションですが、以前よりデバイスやブラウザごとで動作が異なったりと悩ましい部分があります。
今回もそんな件、色々忘れていてハマったので備忘録として。
CSSのanimationでページスクロールアニメーションを実装したらiOS版Chromeで動作しない
スマホ表示時にページスクロールアニメーションを入れたい、との要望。
スクロールに合わせて見出しや画像なんかの要素がフェードインしたりするアレです。
CSSのanimationで実装。
.fade_down_animation {
animation-name: fadeDownAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes fadeDownAnimation {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
こんなやつです。
PCのChromeのウェブデベロッパーツールでスマホ表示して実装。
PC上では問題無し。その後実機で確認すると……iPhoneで問題あり。
Safariでは問題なかったのですが、Chromeでアニメーション部分がおかしい。
フェードはされているようですが、translateは全く効いていません。scaleなんてよくわからない動作をしています。
※iOS15.1.1、Chrome96.0.46 で確認
調べてみるとiOS Chrome側にバグがありそうですが……。
jQueryのanimateで動かすとCPU処理になって重たくなりそうですし、GPU併用でスムーズに動作させたいところです。
CSSのanimationはやめてtransitionで対応
色々設定を変更してみたりしたものの、CSSのanimationでは解消できず……。
そこでtransitionで書き替えてみることにしました。
animationのほうが細かく設定できて、且つ書きやすいのですが、iOS版Chromeを捨てるよりは良いかな、と。
元のanimationでの設定はこのような形。
transitionで書き替えるとこのような形。
上から下に要素をフェードさせて出現させています。
transitionを使うことで、iOS版Chromeでも予想通りに動作しました。
ただし、transition-delayを設定しないと、iOS版Chromeでは動作がおかしくなります。
ここでも若干ハマりました。
デバイスやブラウザごとでの動作の違いは解消に時間がかかりますね……。
ポチップ
ポチップ