Flip In (フリップイン)

要素がY軸を中心に1回転しながら、少し手前に近づいて元に戻ります。

[適用する場所]にフリップ(Flip)のアニメーションを追加してください。
要素が縦軸を中心に1回転しながら少し手前に近づき、わずかに小さくなってから元に戻るようにしてください。生き生きと、でも短く。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ループではなく一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を省いてください。

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

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

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

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

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

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

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

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

要素が小さく傾いた状態から飛び出し、行き過ぎてから、びっくり箱のおもちゃのように落ち着きます。

[適用する場所]にジャックインザボックス(Jack In The Box)の登場アニメーションを追加してください。
要素が下端を支点に、とても小さく傾いた状態から飛び出し、まっすぐな位置を越えて左右に揺れてから落ち着くようにしてください。弾むように、遊び心たっぷりに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。