iPhoneでAnimate.cssのアニメーションが動作しない問題を解決する方法

アニメーションのCSSライブラリであるAnimate.cssを利用したサイトで、デスクトップ上では問題なく動作しますが、iPhoneで閲覧した時にうまく動作しない問題が発生しました。

うまく動作しないというのは、フェードインやバウンスインなどで、アニメーション動作なしに突然表示されるような挙動になってしまうというものです。

原因は、iPhone側の設定に起因するものが一つあります。iPhoneの設定では「視差効果を減らす」のという項目があります。通常はデバイスのモーションエフェクトの設定を意味しますが、この設定がオンになっているとAnimate.cssのアニメーションも影響されます。

デバイスのモーションエフェクトの設定は「prefers-reduced-motion: reduce」というメディアクエリで判定しています。Animate.cssでは、デバイス側で「減らす」設定になっている場合、アニメーションを強制的に1ミリ秒で動作させる設定になっています。デバイス設定に依存させたくない場合は、以下のコードのメディアクエリを編集して対処します。

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}