Entrances & Exits · Entering & leaving
Hinge铰链坠落
- unhung
- swings then drops
- irreversible
The element behaves like a door on a hinge: it swings out to one side, then comes off entirely and falls out of frame still tilted. That says one thing scale-out cannot: this was taken apart, not put away.
When to use it
Use it when something that really existed is being removed: deleting a record, removing a member, destroying an object. Pair it with undo — the motion says “gone”, and the viewer needs to know it can come back.
Parameters
transform-origin: top left · transform: rotate 0→80deg · translateY 0→420px · opacity 1→0 · 1200ms ease-in
Recipe
Hinge → transform-origin: top left · transform: rotate 0→80deg · translateY 0→420px · opacity 1→0 · 1200ms ease-in
One sentence for your AI
Build a hinge drop: set transform-origin to top left, rotate to 80deg over the first 20%, then hold that angle while translating Y by 420px and fading opacity to 0, all over 1200ms ease-in. Without the origin it rotates about its centre and never falls.