フリーランスウェブエンジニアがウェブ全般について綴るブログ|いしかわろぐ
PRPR

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

CSSのanimationがiOSのChromeで動かない…transitionで対応ウェブ制作・運用
ウェブ制作・運用HTML・CSS・プログラミング
本ページはプロモーションが含まれています

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

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

 

オススメ
アイテム

CSSのanimationがiOSのChromeで動かない…transitionで対応
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
 

オススメ
アイテム

CSSのanimationがiOSのChromeで動かない…transitionで対応
プロの「引き出し」を増やす HTML+CSSコーディングの強化書

コメント

タイトルとURLをコピーしました