登場と退場 · 出てくる・消える
ロール翻滚
- 転がってくる
- 一回転
- 収まる
要素が車輪のように転がって入ります。移動しながら一回転し、止まったときにはちょうど正位置です。回転角は移動距離に縛られます。距離を縮めたら回転も減らさないと、「空回り」して見えます。
使いどころ
「ここまで転がってきた」と見せたいときに使います（リストから転がり込むバッジ、落ちて収まるチップ、転がり出る通知）。時間を食うので、一度に一つだけ転がしてください。
パラメータ
transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
レシピ
ロール → transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
AI に渡す一文
ロールの登場を作ってください。translateX を -100% から 0 へ、同時に rotate を -360deg から 0deg へ、460ms の ease-out で、opacity も 0 から 1 へ。rotate と translate は同じ transform に同じ時間で書いてください。transition を二つに分けると別々に走り、空回りして見えます。