list-inside list-disc whitespace-normal [li_&]:pl-6

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

The CSS custom properties shown—-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;—are concise examples of how modern projects use CSS variables to control animation behavior consistently and flexibly. Below is a practical guide explaining what each part does, why you might use this pattern, and how to implement it effectively.

What these properties mean

• -sd-animation: sd-fadeIn;
  Defines a custom property (prefixed here with -sd-) that names the animation to apply. The actual animation keyframes are expected to be defined elsewhere (e.g., @keyframes sd-fadeIn { … }).
• –sd-duration: 250ms;
  Sets the animation duration using a CSS custom property so it can be reused and overridden per component or theme.

• –sd-easing: ease-in;
  Sets the timing function (easing) via a variable, allowing consistent motion curves across components.

Why use CSS variables for animations

• Reusability: Define variables once (e.g., in a design system) and reuse them across components.
• Override-friendly: Consumers of a component can change duration or easing without editing component internals.
• Theming: Easily adapt motion for themes—e.g., reduced-motion or faster animations for performance modes.
• Readability: Clear, semantic names (like –sd-duration) communicate intent.

Implementing sd-fadeIn

1. Define keyframes:

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

2. Create a base class that consumes the variables:

.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;}

3. Apply to elements and override as needed:

<div class=“sd-animated” style=”–sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”>  Fade-in content</div>

Accessibility considerations

• Respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {  .sd-animated { animation: none !important; transition: none !important; }}

• Keep durations short (200–300ms) for small UI elements to reduce motion discomfort.

Advanced tips

• Combine with staggered delays using a custom property like –sd-delay and calc-based offsets.
• Use logical properties and transforms for GPU-accelerated animations.
• Expose a small set of semantic motion tokens (e.g., –sd-motion-fast, –sd-motion-slow) for consistency.

Example: Staggered list

.item {   –sd-delay: calc(var(–index) * 40ms);  animation-delay: var(–sd-delay);}

Conclusion

Using CSS custom properties like –sd-animation, –sd-duration, and –sd-easing provides a scalable, accessible, and theme-friendly way to manage animations across a project. The pattern enhances reusability and makes it simple to offer consistent motion while allowing per-component customization.