Understanding the CSS Custom Properties: ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”
These three CSS custom properties—-sd-animation, –sd-duration, and –sd-easing—are concise variables that control a component’s animation behavior. They’re named with a consistent prefix (sd-) which suggests they belong to a design system or component library. Below is an explanation of each property, how they work together, practical use cases, accessibility considerations, and examples for implementation.
What each property does
- –sd-animation: sd-fadeIn;
Specifies the animation name or type applied to the element. In this example,sd-fadeInimplies a fade-in effect implemented via a keyframe or a predefined class in the design system. - –sd-duration: 0ms;
Controls how long the animation runs. A value of0msdisables visible animation (instant application), which can be useful as a default or for users who prefer reduced motion. - –sd-easing: ease-in;
Sets the timing function for the animation’s progression.ease-instarts slowly and accelerates, creating a natural entrance motion for elements.
How they work together
These variables are intended to be read by CSS rules (or a component’s stylesheet) that map the variable values to the actual animation properties. A typical implementation will reference these custom properties within the element’s animation shorthand or individual animation- properties so the design system can apply consistent motion across components
Example implementation
CSS setup (assumes the design system defines the keyframes for sd-fadeIn):
:root {–sd-animation: sd-fadeIn; –sd-duration: 300ms; –sd-easing: ease-in;}
/* Keyframes for the named animation /@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
/ Component that consumes the variables /.card { animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}To honor the user’s preference for reduced motion, toggle the duration:
@media (prefers-reduced-motion: reduce) { :root { –sd-duration: 0ms; }}Practical use cases
- Rapidly switching animation presets across a large site by overriding the variables in a theme or component wrapper.
- Providing developers a simple API to adjust motion without editing keyframes.
- Disabling animations globally for accessibility by setting –sd-duration to 0ms.
Accessibility considerations
- Respect prefers-reduced-motion by setting
–sd-duration: 0msfor users who request reduced motion. - Avoid using motion that causes dizziness or triggers vestibular disorders; subtle fades and short durations are safer.
- Ensure content remains usable and discoverable when animations are disabled.
Tips for design systems
- Use descriptive names for animation types (e.g., sd-fadeIn-up, sd-scale-up) to clarify motion intent.
- Provide sensible defaults and tokens for duration (e.g., 150ms, 300ms, 600ms) and easings (ease, ease-in-out, cubic-bezier values).
- Document usage patterns and accessibility behavior so integrators can apply animations consistently.
Conclusion
The trio –sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in; forms a compact, flexible API for controlling element motion within a design system. By externalizing animation parameters into CSS custom properties, teams gain theme-level control, easier customization, and better accessibility handling.
Leave a Reply