よく使う動き3種

実務で作る動きは、たいてい入場・開閉・通知の3つに収まります。3つとも完成形を置いたので、値だけ案件に合わせて差し替えます。

動きの設計 で「その動きが何を説明しているか」を決めたあと、実際に書くコードです。3つとも動きを減らす設定への対応まで含めてあります。

共通の土台#

3つのコードはこのトークンを前提にしています。出発点のCSS を貼っていれば、すでに入っています。

1 フェード入場#

一覧に追加された分だけを、少し下から浮かせます。「もっと見る」で足された分や、絞り込んだ結果に使う形です。時差をかけるのは先頭の3枚まで。 全件にかけると、押した人が見ていない場所で最後の1枚が止まるまで、待ち時間だけが伸びます。

backwards を付けると、待っている間も from の状態で止まります。これが無いと、遅らせたカードが一瞬だけ完成形で見えてから消え、また出てきます。

差し込んだあとに is-new を外す処理を入れておくと、次の追加でまた動きます。

2 アコーディオン開閉#

details と summary なら、開閉そのものは JavaScript なしで動きます。高さの補間だけを CSS で足します。interpolate-size に対応していないブラウザでは、動きが付かずに開閉するだけです。機能は落ちません。

summary の三角は回します。回すのは transform なので、開閉のたびに再計算は走りません。

3 トースト出現#

保存や送信の結果を短く知らせます。動きだけで伝えないのが要点です。消えたあとに何も残らないので、重要な結果はページ本文にも残します。

role="status" を付けると、画面を見ていない人にも読み上げられます。role="alert" は読み上げ中の内容を割り込んで止めるので、失敗の知らせだけに使います。

出す側は、消したあとも要素を残しておきます。作り直すと、次の通知でまた出入りの動きが要ります。

確認する#

• 入場の時差をかけた最後の1枚が、600ms 以内に止まる
• 動きを減らす設定にしたとき、3つとも開閉・通知の結果は伝わる
• トーストが消えたあとも、何が起きたかがページに残っている

出典#

• MDN「CSS animation」
• MDN「interpolate-size」
• MDN「ARIA: status ロール」

関連#

• 動きの設計動かすかどうかの判断
• 動きの基本時間と曲線の決め方
• 性能と配慮動かしてよいプロパティ
• 知らせる通知の置き場所