p]:inline” data-streamdown=”list-item”>Mustangs Theme vs Competitors: Which Is Best for Your Project?

Using CSS Custom Properties: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”

Custom CSS properties (variables) let you centralize animation values for consistency and easier maintenance. The three properties in the title—–sd-animation, –sd-duration, and –sd-easing—are a compact pattern you can use to control animation type, timing, and easing across components.

Why use CSS variables for animations

• Consistency: Define animation behavior once and reuse it across components.
• Theming: Swap values for different themes or breakpoints without editing multiple rules.
• Runtime updates: Update variables via JavaScript for dynamic effects.

Example setup

1. Define animation keyframes and a default variable set:

:root {–sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

2. Create a utility class that applies the variables:

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

3. Use on elements:

<div class=“sd-animated”>Hello — I fade in!</div>

Variations and responsive tweaks

• Faster animation:

.card {  –sd-duration: 150ms;}

• Different easing for a snappier feel:

.button {  –sd-easing: cubic-bezier(.2,.9,.2,1);}

• Disable animation for reduced-motion users:

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

Controlling via JavaScript

Change variables on the fly:

const el = document.querySelector(’.sd-animated’);el.style.setProperty(’–sd-duration’, ‘500ms’);el.style.setProperty(’–sd-easing’, ‘cubic-bezier(.4,0,.2,1)’);

Best practices

• Keep durations between 150–500ms for most UI transitions.
• Use easing that matches the interaction: ease-in for appearing elements, ease-out for disappearing, or material-style cubic-beziers for motion-rich UIs.
• Respect prefers-reduced-motion.
• Use semantic variable names if shared across many animation types.

Conclusion

Using variables like –sd-animation, –sd-duration, and –sd-easing gives you a simple, flexible system to standardize and tweak animations site-wide with minimal CSS or JS changes.