Understanding CSS Custom Properties in Animations: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”
CSS custom properties (variables) let you create flexible, reusable animation controls. The declaration -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; combines a custom animation name with variables for duration and easing. Here’s how to use and implement it effectively.
What each part means
- -sd-animation: sd-fadeIn; — a custom property (prefixed) storing the animation identifier. It’s likely used by a component or framework to apply a specific keyframes animation.
- –sd-duration: 250ms; — sets the animation duration via a CSS variable so multiple components can reuse and override it.
- –sd-easing: ease-in; — sets the timing function (easing) via a variable for consistent motion behavior.
Example implementation
Define keyframes and use the custom properties in a component rule:
css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
/* Base component using the variables /.my-component { / defaults */ –sd-duration: 300ms; –sd-easing: ease-out; -sd-animation: sd-fadeIn;
animation-name: var(-sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}To apply the specific values you provided:
css
.my-component.custom { -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;}Best practices
- Use clear, scoped variable names to avoid collisions (prefix when part of a design system).
- Provide sensible defaults on the component so overrides are optional.
- Use animation-fill-mode: both or forwards to maintain end state if needed.
- Consider reduced-motion preferences:
css
@media (prefers-reduced-motion: reduce) { .my-component { animation: none; }}When to use this pattern
- Design systems needing consistent motion tokens.
- Components that must be easily themeable or adjustable via CSS only.
- Libraries that allow consumers to override behavior without editing core styles.
Quick tips
- Keep durations short for small UI elements (150–350ms), longer for modal or page transitions (400–700ms).
- Match easing to intent: ease-in for entrances that feel natural; ease-out for exits; ease-in-out for smooth combined motions.
- Test across browsers; older browsers may need vendor prefixes for animations.
This approach makes animations declarative, customizable, and maintainable across a codebase.
Leave a Reply