止まらずに動き続けるボタンやバッジのアニメーション

infinite のため、ページを開いている間ずっと、すべての訪問者に対して1.5秒ごとに輪が広がり、ページにはそれを止めるものがありません。

変わるのは1つの値だけです。infinite が 3 になります。1.5秒を3回で4.5秒のうちに終わるため、ページが開いたときには目を引き、その後はボタンが止まって、訪問者は落ち着いて読めます。no-preference の中に書いてあるため、動きを減らしたいと伝えている人には表示されません。これが成り立つのは、何もアニメーションを再び始めない間だけです。数秒ごとやスクロールのたびにクラスを付け直すスクリプトがあると、また終わりのない動きに戻ります。回数か長さを変えるときは、回数×長さを5秒未満に保ちます。

どの方法も2.2.2を満たします。3回で止める方法は、値を1つ変えるだけで、デザインが求めた「ページが開いたときに目を引く」ことを保ち、止まる仕組みも組み込まれています。動かないボタンは、負担がなく誰の気も散らしませんが、大きさ、色、余白でデザインが目を引く役目を担う必要があります。ホバーとフォーカスで動かす方法は、ページの離れた場所から目を引き寄せることがありません。それが利点であり、代償でもあります。注意を引くのではなく、反応を返すものです。動きが依頼の一部なら3回で止める方法を、デザインを変えられるなら動かないボタンを、動きがもともと反応を返すためのものなら、ホバーとフォーカスで動かす方法を選びます。

5秒は、動き始めてからすべての繰り返しを通して数えます。animation-iteration-count × animation-duration に、スクリプトが繰り返しの間に入れる待ち時間を加えたものです。2秒の animation-delay の後に1.5秒を3回動く脈動は、4.5秒動くため満たします。

動きを減らす設定のメディアクエリは、終わりの代わりにはなりません。動きで気が散る人の多くはその設定を知らず、2.2.2はページ自体が止まることを求めています。それでも、動きを no-preference の中に書く価値はあります。負担がなく、設定している人の役に立つためです。動きを減らす設定を無視するアニメーションも参照してください。

ループする飾りには、どれも同じ方法が使えます。終わりを作るか、まったく動かさないかです。

• 光ったり点滅したりする「New」や「Sale」のバッジ：数回で止めるか、より強い色の動かないバッジにします。
• 跳ねる「下へスクロール」の矢印：2〜3回跳ねたら止めます。
• きらめくスケルトン表示：内容が届いたらきらめきを止め、読み込みが長引くときは動かない灰色の四角にします。
• <animateTransform repeatCount="indefinite"> で描いたSVGアイコン：repeatCount に数を指定するか、動かないアイコンにします。
• ループするアニメーションGIFやLottie：数回だけループするように書き出すか、プレーヤーの設定で止めます。

読み込み中を示すスピナーは別です。達成基準の解説書は、ページのどこも使えない間の読み込みアニメーションを、ほかの内容と並んでいないため不可欠なものとして扱っています。ボタンやパネルの中のスピナーのように、読める内容の横にあるものは、読み込みが終わったら止めなければなりません。そこで5秒を超えて回り続ける可能性があるなら、ほかの動きと同じく2.2.2の対象です。数秒たったら、「読み込み中…」のような動かない文字の状態表示か、作業に合わせてだけ進む進行状況バーに置き換えます。

流れる文字、たとえばティッカーや自動で切り替わるカルーセルは、5秒以内に終わらせると読めないため、一時停止ボタンが必要か、まったく動かさない必要があります。これは別のガイドで扱います：一時停止できない、流れる文字、カルーセル、アニメーション。