Entrances & Exits · Entering & leaving
Slide in滑入
- directional
- crisp
- light
The element slides in from off-screen or one side into its final position. The distance is usually only 8–24px, and a fade alongside makes it smoother.
When to use it
Use it when the direction of arrival matters, such as a side panel coming in from the left; if the content just needs to appear, “Fade in” is more restrained.
Parameters
240ms · cubic-bezier(0.22, 1, 0.36, 1) · transform: translateX 24px→0 + opacity 0→1
Recipe
Slide in → translateX 24px → 0 @ 240ms cubic-bezier(0.22, 1, 0.36, 1)Slide in → opacity 0 → 1 @ 240ms
One sentence for your AI
Animate this side panel in: slide from 24px off to the left into place while opacity goes 0→1, 240ms, cubic-bezier(0.22, 1, 0.36, 1).