Element: #256 Fade rise (motion/basics)
What it shows: A card that fades in while rising 16px into place, replaying on a loop only while it is in view.
When to use: Entrance of a card, a toast, a list row or any block that appears after the page has loaded.
Spec:
- `MotionStage` from `@codeatlasdev/ui` with `label="Fade rise: a card fades in while rising into place"` and `loop={2400}`
- `{#key m.cycle}` remounts the card so `animation: fade-rise` runs again each cycle
- Keyframes: `from { opacity: 0; transform: translateY(16px); }` to `to { opacity: 1; transform: translateY(0); }`
- Under reduced motion `class:rise--run={!m.reduced}` drops the animation and the card renders in its final state
Motion:
- opacity, transform: translateY: 420ms cubic-bezier(0.2, 0, 0, 1) delay 80ms
Names: Fade rise | Fade up | Subir com fade
Tags: motion, fade, rise, entrance, card
Needs: @codeatlasdev/ui@4.6.0
Components: Card, MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/basics#fade-rise
{#snippet children(m)}
{#key m.cycle}