Understanding CSS Custom Properties: ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”
CSS custom properties (variables) let developers create flexible, reusable values that can be referenced throughout stylesheets. The trio shown — –sd-animation, –sd-duration, and –sd-easing — appears to be a small, self-contained animation configuration pattern. This article explains what each variable does, how they work together, and how to use them effectively to build customizable animations.
What these variables represent
- –sd-animation: holds the animation name (here
sd-fadeIn), which should correspond to a defined@keyframesrule. - –sd-duration: defines how long the animation runs (here
0ms, meaning effectively no animation unless changed). - –sd-easing: specifies the timing function (here
ease-in) controlling the animation’s acceleration.
Defining the keyframes
You need an @keyframes block for sd-fadeIn. A typical fade-in animation changes opacity and can include a transform for smoother motion:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}Applying the variables in a component
Use the variables to set the animation property so you can override behavior per element or theme:
.card { /* default values */ –sd-animation: sd-fadeIn; –sd-duration: 240ms; –sd-easing: cubic-bezier(.2,.8,.2,1);
animation: var(–sd-animation) var(–sd-duration) var(–sd-easing) both;}Setting –sd-duration: 0ms effectively disables the visible animation while preserving the end state if you still need the final styles applied immediately. If you want the element to appear without transition during initial render but animate later, you can toggle the duration via a class or inline style.
Examples and usage patterns
- Disable animation for reduced-motion users:
@media (prefers-reduced-motion: reduce) { .card { –sd-duration: 0ms; }}- Stagger multiple elements by varying duration or delay:
.item { –sd-duration: 200ms; animation: var(–sd-animation) var(–sd-duration) var(–sd-easing) both;}.item:nth-child(2) { animation-delay: 60ms; }.item:nth-child(3) { animation-delay: 120ms; }- Theming or runtime control:
<div class=“card” style=”–sd-duration: 0ms;”></div> <div class=“card” style=”–sd-duration: 300ms;”></div> Best practices
- Always provide sensible defaults for variables in component rules.
- Respect user preferences (
prefers-reduced-motion). - Avoid 0ms unless you intentionally want no visible animation.
- Use
bothorforwardsto retain the end state when needed.
Conclusion
The snippet –sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in; is a flexible pattern for configurable animations. By defining matching keyframes and applying these variables in component styles, you can create themeable, accessible, and easily overridden motion effects across your UI.
Leave a Reply