Light Speed Out (ライトスピードアウト)
別名 Lightspeed Out
要素が斜めに傾き、フェードアウトしながら横へ高速で去っていきます。
使いどころ
ドラマチックな退場
バリエーション
- to right
- to left
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にライトスピードアウト(Light Speed Out)の退場アニメーションを追加してください。lightspeed out とも呼ばれます。
要素が斜めに傾き、フェードアウトしながら横へ高速で去っていくようにしてください。速く、去るにつれて加速させてください。
端を越えるときに横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。似ているモーション
A
Slide Out (スライドアウト)
別名 Slide Out Up, Slide Out Down
要素がコンテナの端の外へすべり出て消えます。
使いどころ
ドロワーやパネルを閉じるとき
[適用する場所]にスライドアウト(Slide Out)の退場アニメーションを追加してください。slide out up、slide out down とも呼ばれます。
要素が完全に不透明なままコンテナの端の外へすべり出て消えるようにしてください。素早く、去るにつれて加速させてください。
コンテナの端で切り取り、見えなくなったらキーボードやスクリーンリーダーからも隠し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。A
Light Speed In (ライトスピードイン)
別名 Lightspeed In
要素が斜めに傾いた状態で横から勢いよく飛び込み、着地とともにまっすぐになります。
使いどころ
バナーや見出しのドラマチックな登場
[適用する場所]にライトスピードイン(Light Speed In)の登場アニメーションを追加してください。lightspeed in とも呼ばれます。
要素が高速で移動しているように斜めに傾いたまま横から勢いよく飛び込み、傾きを一度だけ反対側へ行き過ぎさせてから、着地とともにまっすぐになるようにしてください。速くドラマチックに、最後は減速させてください。
画面外にある間に横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
Fade Out Directional (ディレクショナルフェードアウト)
別名 Fade Out Up, Fade Out Down
要素が一方向へ流れるように移動しながらフェードアウトします。
使いどころ
通知やカードを閉じるとき
[適用する場所]にディレクショナルフェードアウト(Fade Out Directional)の退場アニメーションを追加してください。フェードアウトアップ(fade out up)、フェードアウトダウン(fade out down)とも呼ばれます。
要素が一方向へ少しだけ移動しながらフェードアウトするようにしてください。素早く、去るにつれて加速します。
周りのコンテンツが早く詰まらないよう、フェードが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。Entrance & Exitのほかのモーション
A
要素が大きくぼやけた透明な状態から縮んでくっきり見えるようになり、煙がふっと集まるように現れます。退場時はその逆です。
使いどころ
オブジェクトのやわらかな出現
[適用する場所]にパフイン/パフアウト(Puff In / Puff Out)のアニメーションを追加してください。パフ(puff)とも呼ばれます。
現れるときは、大きくぼやけた透明な状態から縮み、煙がふっと落ち着くようにくっきり見えるようにし、去るときは再びぼやけながら膨らんで消えるようにしてください。やわらかく、やや素早く。
拡大した状態でレイアウトを押し広げたりスクロールバーを出したりしないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は即座に切り替えてください。A
要素が車輪のように左から転がりながらフェードインします。
使いどころ
リスト項目の遊び心ある登場
[適用する場所]にロールイン(Roll In)の登場アニメーションを追加してください。
要素が車輪のように回転しながら左から転がり込み、同時にフェードインするようにしてください。なめらかに、着地に向けて減速させてください。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
要素が右へ転がりながらフェードアウトします。
使いどころ
リスト項目の遊び心ある削除
[適用する場所]にロールアウト(Roll Out)の退場アニメーションを追加してください。
要素が車輪のように回転しながら右へ転がっていき、同時にフェードアウトするようにしてください。なめらかに、去るにつれて加速させてください。
転がり去ってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。