-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;
This article explains the CSS custom properties shown in the title and how to use them to control animation behavior in modern web projects.
What these properties are
- -sd-animation: a custom CSS property (variable) intended to reference a named animation or animation preset. In this example its value is
sd-fadeIn, suggesting a fade-in effect. - –sd-duration: custom property for animation duration; here it’s set to
0ms, meaning no visible duration (instant). - –sd-easing: custom property for the animation timing function;
ease-instarts slow and accelerates.
These properties are nonstandard by themselves: they are CSS variables that a project’s stylesheet or JS can read and map to real animation rules. Using variables lets designers swap animation presets without changing many rules.
How to define and use them
- Define the variables on a root or component level:
css
:root {–sd-animation: sd-fadeIn; –sd-duration: 300ms; –sd-easing: ease-in;}- Create keyframes for the named animation:
css
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}- Apply the variables to a component (fallbacks shown):
css
.card { animation-name: var(–sd-animation, none); animation-duration: var(–sd-duration, 300ms); animation-timing-function: var(–sd-easing, ease); animation-fill-mode: both;}- Toggle or override per component:
css
.card.fast { –sd-duration: 120ms;}.card.instant { –sd-duration: 0ms; /* instant show — no visible transition */}Practical notes and best practices
- A duration of
0msdisables the visible transition; use it intentionally (e.g., reduce motion preferences or initial loading). - Respect users’ reduced-motion preferences:
css
@media (prefers-reduced-motion: reduce) { :root { –sd-duration: 0ms; }}- Use semantic variable names when sharing across a team (e.g., –motion-fade, –motion-duration-sm).
- Provide sensible fallbacks when reading variables in older browsers.
Example: JavaScript toggling
js
function setAnimation(element, name, duration = ‘300ms’, easing = ‘ease’) { element.style.setProperty(’–sd-animation’, name); element.style.setProperty(’–sd-duration’, duration); element.style.setProperty(’–sd-easing’, easing);}When to use this pattern
- Design systems needing consistent, easily overridable motion.
- Component libraries where animation presets are swapped at runtime.
- Respecting accessibility and user settings centrally.
Summary
The CSS variables in the title are a flexible pattern to control animations declaratively. Define keyframes matching the variable values, apply the variables to components, and provide fallbacks and reduced-motion support for robust UX.
Leave a Reply