-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;
This article explains the CSS custom properties shown in the title, how they work together to create a simple animation system, and how to use and extend them in real projects.
What these properties do
- -sd-animation: a custom property used to select a named animation (here
sd-fadeIn). - –sd-duration: animation duration (here
250ms). - –sd-easing: timing function controlling acceleration (here
ease-in).
Together they let you change an element’s animation by adjusting only variables instead of repeating animation rules.
Defining the base animation
Create a reusable keyframes block matching the animation name:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}Reusable component rule
Use the custom properties to drive the animation on components:
.component { /* default values */ –sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; –sd-delay: 0ms; –sd-fill-mode: both; –sd-iteration-count: 1;
animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-delay: var(–sd-delay); animation-fill-mode: var(–sd-fill-mode); animation-iteration-count: var(–sd-iteration-count); will-change: opacity, transform;}Applying and overriding
Change animation behavior per element without rewriting keyframes:
.card { –sd-duration: 400ms; –sd-easing: cubic-bezier(.2,.8,.2,1);}
.toast { –sd-animation: sd-fadeIn; –sd-duration: 180ms; –sd-delay: 100ms;}Accessibility considerations
- Respect reduced-motion preferences:
@media (prefers-reduced-motion: reduce) { .component { animation: none !important; transition: none !important; }}- Keep durations short and avoid excessive movement.
Extending with multiple animations
For elements needing multiple simultaneous animations, compose with comma-separated properties or additional custom properties:
@keyframes sd-slideUp { from { transform: translateY(8px); } to { transform: translateY(0); } }
.component-multi { –sd-animation: sd-fadeIn, sd-slideUp; animation-name: var(–sd-animation); animation-duration: 250ms, 250ms; animation-timing-function: ease-in, cubic-bezier(.2,.8,.2,1);}JavaScript control (optional)
Toggle or set variables from JS for runtime control:
const el = document.querySelector(’.component’);el.style.setProperty(’–sd-duration’, ‘320ms’);el.style.setProperty(’–sd-delay’, ‘120ms’);Summary
Using custom properties like –sd-animation, –sd-duration, and –sd-easing creates a flexible, maintainable animation system. Define keyframes once, then tune behavior per-component via variables, respect prefers-reduced-motion, and extend with multiple animations or JS control as needed.
Leave a Reply