p]:inline” data-streamdown=”list-item”>3.5″ Master: Top Tips, Uses, and Compatibility

How CSS Custom Properties Create Smooth, Reusable Fade-In Animations

This article explains what the CSS-style title means, how the individual parts work, and how to use the pattern to build clean, reusable fade-in animations across components.

What the snippet declares

• –sd-animation: sd-fadeIn; — selects a named animation (custom property holding the animation name).
• –sd-duration: 250ms; — sets the animation duration to 250 milliseconds.
• –sd-easing: ease-in; — uses an “ease-in” timing function to accelerate the animation from rest.

Together these custom properties let components control animation behavior via variables instead of duplicating animation rules.

Example implementation

/Define the keyframes once /@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/ Base component that uses the CSS variables /.component {  opacity: 0;  transform: translateY(6px);  animation-name: var(–sd-animation, none);  animation-duration: var(–sd-duration, 250ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;}
/ Trigger the animation (e.g., when .is-visible is added) */.component.is-visible {  animation-play-state: running;}

How to use and customize

• To change duration per-component:
  • Add inline or scoped variables: style=“–sd-duration: 400ms;”
• To switch easing:
  • style=“–sd-easing: cubic-bezier(0.2,0.8,0.2,1);”
• To use a different animation name:
  • style=“–sd-animation: sd-slideUp;”

Accessibility notes

• Respect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {  .component { animation: none; transition: none; opacity: 1; transform: none; }}

• Keep durations short (150–300ms) for micro-interactions; longer for emphasis.

Benefits of this pattern

• Reusability: swap behavior without editing the component CSS.
• Consistency: single keyframe definitions reduce divergence.
• Flexibility: easy runtime overrides via inline styles or theming variables.

Short, practical, and modular — using CSS custom properties for animation gives you maintainable, accessible UI transitions.