Flicker In (フリッカーイン)
要素が故障したネオンサインのように素早く明滅してから、点灯したままになります。
使いどころ
ネオン風・レトロ風のテキスト演出
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にフリッカーイン(Flicker In)の登場アニメーションを追加してください。
故障したネオンサインのように、要素が不規則な間隔で何度か点いたり消えたりしてから、点灯したままになるようにしてください。くっきりした明滅で、位置は動かしません。
再生は一度だけにし、光の点滅に敏感な人にも安全なよう明滅の回数は少なく、速すぎないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は点灯した状態で表示してください。似ているモーション
ABC
Flicker (フリッカー)
別名 Flickering
要素の不透明度が、切れかけた電灯のように不規則にちらつきます。
使いどころ
ネオンやグリッチの演出
[適用する場所]にフリッカー(Flicker)のエフェクトを追加してください。flickering とも呼ばれます。
要素はほとんどの時間は安定させ、切れかけたネオンのように短く不規則に途切れて暗くなるようにしてください。
タイミングは等間隔ではなく不規則にし、最大の明るさでの速い点滅は避け、モーションを減らす設定にしているユーザーには止めてください。Flash (フラッシュ)
別名 Blink
要素が不透明度をすばやく切り替えて点滅します。
使いどころ
新着コンテンツの通知
[適用する場所]にフラッシュ(Flash)の注目エフェクトを追加してください。ブリンク(blink)とも呼ばれます。
要素がすばやく消えては現れる点滅を2回行い、その後は完全に表示されたままにしてください。
延々と点滅させず一度だけ再生し、速い点滅は不快に感じられることがあるため、モーションを減らす設定にしているユーザーには再生しないでください。ABCDEF
Neon Glow Text (ネオングローテキスト)
別名 Neon Sign Flicker, Glowing Text
テキストがネオン管のように光り、ちらついたり脈打ったりします。
使いどころ
ナイトライフやゲーム系のテーマ
[適用する場所]にネオングローテキスト(Neon Glow Text)のエフェクトを追加してください。ネオンサインフリッカー(neon sign flicker)、グローイングテキスト(glowing text)とも呼ばれます。
テキストがネオン管のように柔らかく安定した光で輝き、ときどき本物の看板のように一瞬消えるようにしてください。
速い点滅は一部のユーザーに害を与えることがあるので、ちらつきは速くせずたまに起こる程度にし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を一定に保ってください。A
要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。
使いどころ
モーダル、トースト、ページコンテンツの表示
[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。Entrance & Exitのほかのモーション
A
要素がY軸を中心に1回転しながら、少し手前に近づいて元に戻ります。
使いどころ
カードやバッジを目立たせて見せるとき
[適用する場所]にフリップ(Flip)のアニメーションを追加してください。
要素が縦軸を中心に1回転しながら少し手前に近づき、わずかに小さくなってから元に戻るようにしてください。生き生きと、でも短く。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ループではなく一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を省いてください。A
Flip In (フリップイン)
別名 Flip In X, Flip In Y
要素が横軸または縦軸を中心に3D回転し、真横を向いた状態から正面を向きます。
使いどころ
カードやタイルの表示
[適用する場所]にフリップイン(Flip In)の登場アニメーションを追加してください。フリップインX(flip in X)、フリップインY(flip in Y)とも呼ばれます。
要素が真横を向いた状態から横軸を中心に回転して正面を向き、少し行き過ぎて戻ってから落ち着くようにしてください。素早く、小さな揺れを伴って。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで正面を向いた状態で表示してください。A
Flip Out (フリップアウト)
別名 Flip Out X, Flip Out Y
要素が3D回転し、真横を向いて見えなくなります。
使いどころ
カードやタイルを取り除くとき
[適用する場所]にフリップアウト(Flip Out)の退場アニメーションを追加してください。フリップアウトX(flip out X)、フリップアウトY(flip out Y)とも呼ばれます。
要素が少し後ろに傾いてから、縦軸を中心に回転して真横を向き、消えるようにしてください。素早く、キレよく。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、回転が終わってから要素を取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。