Entrances & Exits · Entering & leaving
Roll翻滚
- rolling along
- a full turn
- settling
The element rolls in like a wheel: translating while rotating a full turn, landing exactly upright. The rotation is locked to the travel distance — shorten the distance and the turn has to shrink with it, or it looks like it is skidding.
When to use it
Use it when the journey is the point: a badge rolling in from a list, a chip dropping into place, a notice tumbling out. It costs time, so roll one thing at a time.
Parameters
transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
Recipe
Roll → transform: translateX -100%→0 · rotate -360deg→0deg · opacity 0→1 · 460ms ease-out
One sentence for your AI
Build a roll entrance: translateX from -100% to 0 while rotate goes from -360deg to 0deg, over 460ms ease-out, with opacity following 0 to 1. Keep rotate and translate in the same transform with the same duration — split across two transitions they run independently and look like skidding.