data-streamdown=

Article: Understanding CSS Custom Properties in Animation — ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”

CSS custom properties (variables) let you create flexible, reusable animation controls. The declaration -sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in; combines a custom animation name with duration and easing variables. This article explains what each part does, how to use them effectively, and best practices for maintainable, accessible animations.

What these properties mean

• -sd-animation: sd-fadeIn;
  This appears to be a vendor- or project-specific shorthand for assigning a named animation. It likely maps to an animation definition (keyframes) named sd-fadeIn.
• –sd-duration: 0ms;
  A CSS custom property setting the animation duration to zero milliseconds. This effectively disables visible animation, causing the animated properties to jump to their final values immediately.

• –sd-easing: ease-in;
  Another custom property specifying the timing function for the animation, here using the built-in ease-in curve.

Example usage

Use these variables in component styles so the same animation can be reused and tuned via variables:

:root {–sd-duration: 300ms;  –sd-easing: ease-in;}
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
.my-element {  animation-name: var(–sd-animation, sd-fadeIn);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease-in);  animation-fill-mode: both;}

Note: If using a custom property for animation-name, provide a fallback as shown. Some older browsers don’t handle custom properties in animation-name consistently.

When duration is 0ms

Setting –sd-duration: 0ms is useful when you want to:

• Disable animations globally (e.g., reduce-motion preference or testing).
• Ensure instant state changes while keeping animation-related CSS for toggling later.

To respect user motion preferences:

@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms; }}

Accessibility considerations

• Honor prefers-reduced-motion.
• Avoid using animations that interfere with readability or cause motion sickness.
• Ensure focus indicators and interactions remain usable when animations are disabled.

Best practices

• Use meaningful variable names and defaults.
• Provide fallbacks for older browsers.
• Keep keyframes and timing separate so tuning is easy.
• Use 0ms or reduced durations for initial renders if you want no entrance motion on load.

Conclusion

The snippet -sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in; shows a modular approach to animation control using custom properties. Proper defaults, fallbacks, and accessibility considerations make this pattern powerful for building consistent, user-friendly UI animations.