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

How to Use the CSS Custom Properties: -sd-animation, –sd-duration, and –sd-easing

Animation in modern web design often relies on CSS variables (custom properties) to make effects reusable and easy to adjust. The three properties shown — -sd-animation, –sd-duration, and –sd-easing — form a compact pattern for applying consistent, configurable entrance animations across components. Below is a practical guide explaining each property, how they work together, and examples you can adapt.

What each property does

• -sd-animation: A shorthand custom property that names or activates a specific animation behavior (here: sd-fadeIn). Use it on elements to indicate which predefined animation they should use.
• –sd-duration: Defines how long the animation runs (e.g., 250ms, 0.5s). Centralizing duration in a variable makes it simple to update timing across many elements.
• –sd-easing: Controls the animation timing function (e.g., ease-in, linear, cubic-bezier(0.4, 0, 0.2, 1)) to change acceleration and deceleration.

Core CSS pattern

1. Define the keyframes for the named animation(s).
2. Provide a base rule that reads the variables and applies the animation.
3. Set per-component variables to customize behavior.

Example implementation:

/1) Keyframes for the named animation /@keyframes sd-fadeIn {  from {    opacity: 0;    transform: translateY(8px);  }  to {    opacity: 1;    transform: translateY(0);  }}
/ 2) Base rule that applies animation when -sd-animation is set /[data-sd-animation] {  / fallbacks: default values if variables aren’t provided /  –sd-duration: var(–sd-duration, 250ms);  –sd-easing: var(–sd-easing, ease-in);  animation-name: var(–sd-animation-name, none);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;  animation-delay: var(–sd-delay, 0ms);  opacity: 0; / keep hidden until animation runs /}
/ Map shorthand custom property to the actual animation name /[data-sd-animation=”-sd-animation: sd-fadeIn;”] {  / Not needed in practice — instead map values programmatically /}
/ Practical approach: use a mapping class or attribute */[data-sd-animation=“sd-fadeIn”] {  –sd-animation-name: sd-fadeIn;}

Applying to elements

• Inline with attributes:
  …
• With utility classes:

.sd-fadeIn {  –sd-animation-name: sd-fadeIn;}

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

Tips and best practices

• Use animation-fill-mode: both so elements retain final state after finishing.
• Prefer transform and opacity for better performance (GPU-accelerated).
• Provide sensible defaults in your base rule so elements still animate if a page author forgets to set the variables.
• Use short durations (150–350ms) for micro-interactions and longer (500–800ms) for larger entrance effects.
• If you need to toggle animations on state changes, add/remove the data attribute or use a utility class to retrigger.

Accessibility considerations

• Respect prefers-reduced-motion: disable or simplify animations for users who prefer reduced motion.

@media (prefers-reduced-motion: reduce) {  [data-sd-animation] {    transition: none;    animation: none;    opacity: 1;    transform: none;  }}