Understanding ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”
The CSS fragment shown is a set of custom properties and a shorthand-like declaration likely used by a design system or component library to control entry animations. Here’s what each part means and how to use them effectively.
What each token does
- -sd-animation: sd-fadeIn;
- Assigns a named animation preset (here, “sd-fadeIn”) to the element. This preset typically maps to a keyframes animation that changes opacity (and possibly transform) to create a fade-in effect.
- –sd-duration: 0ms;
- Sets the duration of the animation to zero milliseconds. That effectively disables visible animation; the final state is applied instantly.
- –sd-easing: ease-in;
- Defines the timing function used for the animation easing curve. “ease-in” starts slowly and accelerates.
When to use these values
- Use this exact set when you want an element to use the fade-in preset but avoid the animated transition (for accessibility preferences, initial render flash prevention, or testing).
- Keep the easing when you’ll later enable a nonzero duration so the timing curve is already defined.
Practical examples
- Enable visible fade-in (CSS)
.element {-sd-animation: sd-fadeIn; –sd-duration: 300ms; /* change from 0ms to show animation */ –sd-easing: ease-in;}- Respect user preference for reduced motion (CSS)
@media (prefers-reduced-motion: reduce) { .element { –sd-duration: 0ms; }}- JavaScript toggle (apply instant vs animated)
const el = document.querySelector(‘.element’);// instant (no visible animation)el.style.setProperty(‘–sd-duration’, ‘0ms’);// animateel.style.setProperty(‘–sd-duration’, ‘300ms’);Accessibility notes
- A duration of 0ms prevents motion that might trigger vestibular disorders — good for reduced-motion needs.
- Still provide controls or respects prefers-reduced-motion media query instead of forcing zero-duration.
Troubleshooting
- If no animation runs even with a nonzero duration, ensure the “sd-fadeIn” keyframes/preset are defined in your stylesheet or design system.
- Confirm the properties names match exactly those expected by your component library (leading hyphen vs double-dash differences matter).
Quick summary
- The snippet assigns a fade-in animation preset, disables the visible animation by setting duration to 0ms, and sets the easing to ease-in; change –sd-duration to a nonzero value to enable animated fades, and use prefers-reduced-motion to respect accessibility.
Leave a Reply