-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;
CSS custom properties like –sd-animation, –sd-duration, and –sd-easing let developers create flexible, reusable animation systems. Though the exact names shown here look like design-system-specific variables, the pattern is widely useful. This article explains what these properties do, how to use them, and practical examples.
What these properties represent
- –sd-animation: A variable that specifies the animation name or shorthand used by the design system (here: “sd-fadeIn”).
- –sd-duration: Controls how long the animation runs (here: 0ms).
- –sd-easing: Defines the timing function (here: ease-in), determining acceleration behavior.
Why use CSS custom properties for animation
- Consistency: Centralizes animation settings so multiple components share the same behavior.
- Theming: Easily swap motion styles for different contexts (e.g., reduced motion, slow motion, or brand-specific timing).
- Runtime flexibility: Change values with JavaScript or on different breakpoints without editing every rule.
Typical usage pattern
Define defaults at a root or theme layer, and then consume them in component rules:
:root {–sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease;}
.component { animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}Example: sd-fadeIn keyframes
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }}If the variable –sd-duration is set to 0ms, the animation effectively runs instantly (no transition), which can be useful for disabling motion by default or for server-rendered states where you want the final look immediately.
Accessibility: respecting reduced motion
Provide a reduced-motion override to honor user preferences:
@media (prefers-reduced-motion: reduce) { :root { –sd-duration: 0ms; }}This approach cleanly disables animations across components by changing a single variable.
Dynamically toggling animation with JS
You can adjust variables on the fly for contextual motion:
element.style.setProperty(‘–sd-duration’, ‘400ms’);element.classList.add(‘component–enter’);Or temporarily disable animation:
element.style.setProperty(‘–sd-duration’, ‘0ms’);Common patterns and tips
- Use semantic variable names (e.g., –sd-duration-fast, –sd-duration-slow) for clarity.
- Combine with utility classes (e.g., .no-motion) that set durations to 0ms for testing or accessibility.
- Keep keyframes generic (fade, slide, scale) and reuse them across components.
- Ensure animation-fill-mode is set appropriately so components don’t jump back to initial states.
Conclusion
Using variables like –sd-animation, –sd-duration, and –sd-easing provides a powerful, centralized way to control motion across a design system. Setting –sd-duration to 0ms is a simple, effective pattern for disabling animation when needed, and respecting prefers-reduced-motion ensures accessibility for users who prefer minimal motion.
Leave a Reply