list-item

-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;

CSS custom properties like –sd-animation, –sd-duration, and –sd-easing let developers create flexible, reusable animation systems. Using a small set of well-named variables makes it easy to apply consistent motion across components while keeping the option to override behavior per element. Below is a concise guide to understanding and applying the three properties shown: -sd-animation, –sd-duration, and –sd-easing.

What these properties represent

• -sd-animation: A custom property intended to hold the animation name or pattern (here, “sd-fadeIn”). The leading hyphen suggests a vendor-like or design-system-specific namespace.
• –sd-duration: Controls how long the animation runs (e.g., “250ms”).
• –sd-easing: Defines the timing-function for the animation (e.g., “ease-in”).

Example: Building a design-system-friendly fade-in

1. Define the keyframes:

@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

2. Provide sensible defaults via :root or a design-system class:

:root {  –sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}

3. Create a utility or component rule that consumes the variables:

.sd-animate {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

4. Apply and override:

<div class=“sd-animate”>Content fades in</div>
<div class=“sd-animate” style=”–sd-duration: 500ms;”>Slower</div>

Best practices

• Namespace custom properties to avoid clashes (e.g., –sd- or –ds-).
• Use animation-fill-mode: both to maintain end state.
• Prefer duration and easing variables so you can tweak motion system-wide.
• Keep keyframes simple for performance; prefer transform and opacity changes.

Accessibility considerations

• Respect OS-level reduced motion preferences:

@media (prefers-reduced-motion: reduce) {  .sd-animate { animation: none; }}

• Avoid motion that can cause dizziness; use subtle translations and short durations.

Conclusion

Using variables like -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; gives you a modular, overridable approach to animations that scales across a design system while remaining easy to tune for accessibility and performance.