Entrances & Exits · Entering & leaving
Light speed光速穿梭
- very fast
- stretched
- snapping upright
The element rushes in from the side, its body skewed by its own speed, then snaps upright as it lands. The speed is carried entirely by that skew — remove it and what is left is an ordinary slide-in. The skew scales with the speed: faster means more tilt.
When to use it
Use it when the arrival itself is the message: a big announcement, a limited-time offer, a stream going live. Keep it out of everyday tool UIs — it is loud, and it stops working the second time.
Parameters
transform: translateX -100%→0 · skewX -18deg→0deg · opacity 0→1 · 380ms ease-out
Recipe
Light speed → transform: translateX -100%→0 · skewX -18deg→0deg · opacity 0→1 · 380ms ease-out
One sentence for your AI
Build a light-speed entrance: the element rushes from translateX(-100%) to 0 while skewX returns from -18deg to 0deg and opacity goes 0 to 1, over 380ms ease-out. The skew must finish at the same moment as the travel, or you will see it straighten up and then stop. Remember overflow: hidden on the container.