-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;
These CSS custom properties form a concise declarative pattern for controlling an element’s animation behavior. Below is a short, practical article explaining what each property does, how they work together, examples, and best practices.
What these properties mean
- -sd-animation: sd-fadeIn; — selects a named animation (here, “sd-fadeIn”) that defines keyframes for the effect. The prefix suggests a design system or component library namespace.
- –sd-duration: 250ms; — sets the animation length to 250 milliseconds.
- –sd-easing: ease-in; — sets the timing function to “ease-in”, making the animation start slowly and speed up.
Example keyframes and usage
Define keyframes for sd-fadeIn and consume the variables in a component:
css
:root {–sd-duration: 250ms; –sd-easing: ease-in; –sd-animation: sd-fadeIn;}
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
.card { animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both; will-change: opacity, transform;}Practical considerations
- Namespace: Prefixing with “sd-” avoids collisions with other animations.
- Accessibility: Respect prefers-reduced-motion; provide a non-animated fallback.
- Performance: Use opacity and transforms; avoid animating layout properties.
- Composition: Combine with delays or staggered values for sequenced entrances.
Accessibility example
css
@media (prefers-reduced-motion: reduce) { .card { animation: none; transition: none; }}When to use
- Micro-interactions like toasts, modals, list entries.
- Short, subtle entrance effects—250ms is ideal for quick feedback without feeling sluggish.
Summary
This trio of CSS variables provides a flexible, namespaced way to apply a subtle fade-in animation with a 250ms ease-in timing. Use keyframes that animate opacity and transform, respect accessibility settings, and prefer performant properties for smooth UI transitions.
Leave a Reply