CSSのanimationがiOSのChromeで動かない…transitionで対応

CSSのanimationがiOSのChromeで動かない…transitionで対応

CSSのanimation。

昔は要素を動かすにはjQueryのanimateばかり使っている時期がありましたが、jsは多用しすぎると動作が重くなってしまう。
CSSのanimationを使えばそれが改善されるということで、知った時には感動したものです。

それ以降は要素を動かす際には、まずCSSのanimationで考え、jsと併用して実現する……という流れとしています。

さてさて、このCSSアニメーションですが、以前よりデバイスやブラウザごとで動作が異なったりと悩ましい部分があります。
今回もそんな件、色々忘れていてハマったので備忘録として。

CSSのanimationでページスクロールアニメーションを実装したらiOSのChromeで動作しない

スマホ表示時にページスクロールアニメーションを入れたい、との要望。
スクロールに合わせて見出しや画像なんかの要素がフェードインしたりするアレです。

CSSのanimationで実装。

こんなやつです。

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では動作がおかしくなります。
ここでも若干ハマりました。

デバイスやブラウザごとでの動作の違いは解消に時間がかかりますね……。

 

オススメ
アイテム

CSSのanimationがiOSのChromeで動かない…transitionで対応
Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript (English Edition)

 

オススメ
アイテム

CSSのanimationがiOSのChromeで動かない…transitionで対応
CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計

コメントを残す

*