Swing (スイング)

要素が不安定な物のように、傾きながら左右に揺れます。

[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。

要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。

[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。

要素が左上の角を蝶番にして振れ、ぶら下がって揺れたあと画面の外へ落ちていきます。

[適用する場所]にヒンジ(Hinge)の退場アニメーションを追加してください。
ネジが外れたように要素が左上の角を支点に垂れ下がり、左右に揺れてから、フェードアウトしながら画面の外へ落ちるようにしてください。ゆっくり、コミカルに、意図的に。
レイアウトを押し広げたりスクロールバーを出したりせずに他のコンテンツの上を落ちるようにし、落ちきったら取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

ホバーすると要素が数度だけ回転します。

[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。

要素が大きくなり、回転しながら小刻みに揺れてから元のサイズに戻る、お祝いのような動きです。

[適用する場所]にタダー(Tada)のアテンション効果を追加してください。
要素が一度少し小さくなってから大きくなり、素早く傾きながら左右に揺れて元のサイズに戻るようにしてください。ささやかなお祝いのような動きです。
成功した直後などに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。

要素がスマートフォンのバイブのように、さまざまな方向へ細かく素早く震えます。

[適用する場所]にバイブレート(Vibrate)のアテンション効果を追加してください。バズ(buzz)、バイブレーション(vibration)とも呼ばれます。
要素がスマートフォンのバイブのように、いろいろな方向へ細かく素早く一瞬震えてから止まるようにしてください。
コンテンツが読めるよう動きはごく小さくし、ループさせずにアラートごとに一度だけ再生してください。