-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;
These CSS custom properties look like a compact, developer-friendly way to control an animation system for UI components. This article explains what they mean, how to implement them, and practical patterns for using them in scalable design systems.
What these properties do
- -sd-animation: selects a named animation (here
sd-fadeIn) applied to an element. - –sd-duration: sets how long the animation runs (here
250ms). - –sd-easing: sets the timing function (
ease-in) controlling acceleration.
Using custom properties makes animation behavior configurable per-component without editing stylesheet rules, which is useful for themeable components and design tokens.
Implementing a small animation system
- Define keyframes for the named animations you plan to support:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}- Create a base animation rule that reads the custom properties:
[data-sd-animated] { animation-name: var(–sd-animation, none); animation-duration: var(–sd-duration, 300ms); animation-timing-function: var(–sd-easing, ease); animation-fill-mode: both; will-change: opacity, transform;}- Apply properties on specific components:
.card { –sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;}JavaScript toggle for conditional animations
For interactions (enter/exit, list reordering) you may want to add/remove the attribute that triggers animation:
function animateIn(el) { el.setAttribute(‘data-sd-animated’, “); // force reflow to restart animation if needed void el.offsetWidth; // optionally remove after animation ends el.addEventListener(‘animationend’, () => el.removeAttribute(‘data-sd-animated’), { once: true });}Accessibility and performance considerations
- Respect reduced-motion preferences: disable or shorten animations for users who opt out.
@media (prefers-reduced-motion: reduce) { [data-sd-animated] { animation: none !important; transition: none !important; }}- Keep animations short and use transform/opacity for GPU-accelerated rendering.
- Avoid animating layout properties (width/height/left/top) where possible.
Theming and runtime control
- Expose design tokens for animation durations/easings, letting your component library swap them for different speed profiles (fast/normal/slow).
- For complex stateful animations, combine CSS variables with JS-controlled classes or the Web Animations API for precise control.
Examples and patterns
- Staggered list reveal: set increasing –sd-duration or use animation-delay computed in JS.
- Modal enter animation: use sd-fadeIn on backdrop and a different animation (e.g., sd-scaleIn) for panel.
- Global defaults: define root-level vars to standardize durations and easings.
Conclusion
Using custom properties like -sd-animation, –sd-duration, and –sd-easing creates a flexible, themeable animation system. It separates intent from implementation, supports runtime customization, and fits well into component-driven UI libraries—when combined with accessibility and performance best practices.
Leave a Reply