Flip (フリップ)

カードが軸を中心に半回転し、裏面を見せます。

[適用する場所]にカードフリップ(Card Flip)エフェクトを追加してください。フリップカード(flip card)、カードフリップ3D(card flip 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが縦軸を中心に立体的に裏返って裏面を見せ、離れたら元に戻るようにしてください。なめらかに、一定の速さで。
各面の裏側は隠して表裏が透けて重ならないようにし、キーボードフォーカスやタッチ端末のタップでも裏返るようにしてください。

要素が横軸または縦軸を中心に3D回転し、真横を向いた状態から正面を向きます。

[適用する場所]にフリップイン(Flip In)の登場アニメーションを追加してください。フリップインX(flip in X)、フリップインY(flip in Y)とも呼ばれます。
要素が真横を向いた状態から横軸を中心に回転して正面を向き、少し行き過ぎて戻ってから落ち着くようにしてください。素早く、小さな揺れを伴って。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで正面を向いた状態で表示してください。

文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。

[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。

要素が3D回転し、真横を向いて見えなくなります。

[適用する場所]にフリップアウト(Flip Out)の退場アニメーションを追加してください。フリップアウトX(flip out X)、フリップアウトY(flip out Y)とも呼ばれます。
要素が少し後ろに傾いてから、縦軸を中心に回転して真横を向き、消えるようにしてください。素早く、キレよく。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、回転が終わってから要素を取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

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

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