CSSのanimation。
昔は要素を動かすにはjQueryのanimateばかり使っている時期がありましたが、jsは多用しすぎると動作が重くなってしまう。
CSSのanimationを使えばそれが改善されるということで、知った時には感動したものです。
それ以降は要素を動かす際には、まずCSSのanimationで考え、jsと併用して実現する……という流れとしています。
さてさて、この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では動作がおかしくなります。
ここでも若干ハマりました。
デバイスやブラウザごとでの動作の違いは解消に時間がかかりますね……。
コメント