Components / Surfaces and motion / Enter transition
M5 · Surfaces and motion New
Enter transition
Content enters from scale 0.94 and 6 px down, fading in. Replay runs it again.
<article class="card enter">
<h3>Items closed</h3>
<p class="value num">128</p>
</article>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A panel arrives after a route or a command.
- The motion is one shot, not a loop.
When not to use
- The element is already on screen.
- Reduced motion is set. The class still lands on the end state.
Usage
<article class="card enter">
<h3>Items closed</h3>
<p class="value num">128</p>
</article>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| enter | class | — | Runs the yr-enter keyframes once. |
| --enter-scale | 0.94 | 0.94 | Starting scale. |
| --enter-y | 6 px | 6 px | Starting offset. |
| --spring-panel-ms | 320 ms | 320 ms | Duration. |
Keyboard
| Key | Action |
|---|---|
| Enter | On Replay, restarts the enter class. |
Accessibility
- Replay is a button.
- prefers-reduced-motion removes the animation.
- The final text does not depend on the motion.
Motion
- .enter uses --spring-panel at 320 ms.
- From opacity 0, translateY(6px), scale(0.94).
- Nothing repeats at rest.
Pattern origin
Pattern type: an enter transition (scale 0.94, 6 px down, fade).