「CSSのアニメーションが行われない」
CSSで
animation又は、animation-nameでアニメーション名を設定し、
@keyframesでキーフレームアニメーションを設定しているにもかかわらず、
アニメーションが動作せず、全て完了状態で表示される。
回答
reset.css（リセットCSS）を設定している場合に、表示する個別のパソコン端末やモバイル端末ごとに、
アニメーションが動作する端末や、動作しない端末が、端末設定により発生します。
以下2つの条件を満たす場合に、アニメーションが動作しません（完了状態になる）
１．reset.cssに、以下のような記述がある
@media(prefers-reduced-motion:reduce) {
* {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
・・・
}
}
２．端末の設定が、アニメーションを表示しない設定になっている
・Windows10の場合
設定⇒簡単操作⇒ディスプレイ⇒アニメーションを表示する
がオフになっている
・Androidの場合
設定⇒ユーザー補助⇒アニメーションを無効化
がオンになっている
・iOSの場合
設定⇒一般⇒アクセシビリティ⇒視差効果を減らす
がオンになっている
又は、省エネモードになっている
ソース
CSSのprefers-reduced-motion は、
ユーザーが余計な動きを最少化するよう要求したかどうかです。
prefers-reduced-motion:no-preference
システムが把握している設定をユーザーが行っていないことを示す
prefers-reduced-motion:reduce
アニメーションの種類を削除したり置き換えたりする希望をユーザーがシステムに設定したこと示す