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

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

Custom properties (CSS variables) let you store reusable values and create adaptable, maintainable styles. The snippet below shows three custom properties used to control an animation: a named animation flag, a duration, and an easing function.

What each property does

• -sd-animation: sd-fadeIn;
  Acts as a flag or identifier for which animation to apply. The name suggests a “fade in” effect and can be read by other rules to conditionally apply corresponding keyframes or utility styles.

• –sd-duration: 250ms;
  Sets the animation duration. Using a custom property makes it easy to change timing across multiple components.

• –sd-easing: ease-in;
  Defines the timing function for the animation, giving it an accelerating start.

How to use them in CSS

Example usage that ties these variables to actual animation behavior:

/Define keyframes for sd-fadeIn /@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/ Component base with defaults /.component {  –sd-duration: 250ms;  –sd-easing: ease-in;  -sd-animation: sd-fadeIn;  opacity: 1;  transition: none;}
/ Apply animation when the flag matches /.component[style=”–sd-animation: sd-fadeIn”] {  animation-name: sd-fadeIn;  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

Tips and best practices

• Prefer standard custom property names with two dashes (e.g., –sd-animation) unless a framework requires a vendor-like single-dash name. Single-leading-dash identifiers (like -sd-animation) are valid for custom properties but unconventional.
• Use variables for durations, easings, and delays to keep timing consistent across components.
• Combine with prefers-reduced-motion media query to respect accessibility:

@media (prefers-reduced-motion: reduce) {  .component[style*=”–sd-animation: sd-fadeIn”] {    animation: none;    transition: none;  }}

• Keep keyframe names scoped (prefix like sd-) to avoid collisions.

When this pattern is useful

• Design systems where theme tokens control motion.
• Component libraries that need runtime overrides via inline styles.
• Rapid prototyping where animation behavior should be adjustable per-instance.

Using these custom properties gives flexible, centralized control over animation timing and selection while keeping the CSS readable and maintainable.