Core · Helpers
Keyframes
Five shared animations for your own components, which stop when the reader asks for reduced motion.
Files: components/_animations.css
Reduced motion is on, so the animations do not run.
luz-spinluz-shimmerluz-pulseluz-slide-up
A fifth keyframe, luz-fade-in, opens the modal.
Use a keyframe
Name the keyframe in your own animation, and take its duration from a motion token.
.panel[open] {
animation: luz-slide-up var(--luz-duration-base) var(--luz-easing-enter);
}- Under reduced motion every
--luz-duration-*token is0s, so the animation does not run and the element shows in its final state. - A hard-coded duration ignores reduced motion: never write one.
- Do not loop an animation for ever: stop it when the task ends.
| Keyframe | What it does |
|---|---|
luz-spin | One full turn, for a loading indicator |
luz-shimmer | Moves a background gradient across, for a loading placeholder |
luz-pulse | Grows and fades out, then back, to draw the eye once |
luz-slide-up | Fades in while rising 8 px, for something that appears |
luz-fade-in | Fades in, used by the modal and its backdrop |