-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;
This article explains the meaning, use cases, and best practices for a CSS-like custom property set that appears to control an animation: -sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;.
What these properties mean
- -sd-animation: sd-fadeIn; — a custom property likely used by a framework or component to select a predefined animation named “sd-fadeIn” (a fade-in effect).
- –sd-duration: 0ms; — sets the animation duration to 0 milliseconds, making the animation instant (no visible transition).
- –sd-easing: ease-in; — sets the timing function so the animation would accelerate from zero velocity if it had duration.
Typical use cases
- Instant state change: Setting duration to 0ms is useful when you want the fade-in class applied but need no transition (for initial rendering, accessibility preferences, or when toggling animations conditionally).
- Declarative component APIs: Frameworks often expose custom CSS variables so developers can change animation behavior without editing code.
- Theming and runtime overrides: Designers can adjust duration/easing globally by changing variables.
How to implement in CSS/JS
Example pattern components might use these variables:
CSS:
.component {opacity: 0; transition: opacity var(–sd-duration, 300ms) var(–sd-easing, ease);}.component[data-animate=“in”] { opacity: 1; /* optionally use -sd-animation to pick specific keyframes */}@keyframes sd-fadeIn { from { opacity: 0; } to { opacity: 1; }}JS (applying the variables):
const el = document.querySelector(’.component’);el.style.setProperty(’-sd-animation’, ‘sd-fadeIn’);el.style.setProperty(’–sd-duration’, ‘0ms’);el.style.setProperty(’–sd-easing’, ‘ease-in’);el.dataset.animate = ‘in’;Note: Custom properties with single leading dash (like -sd-animation) are technically invalid per the CSS custom property syntax, which requires two dashes (–) for custom properties. Many frameworks still accept single-dash prefixed properties in JS usage or map them internally; prefer using standard –sd-animation where possible.
Accessibility considerations
- Respect users’ reduced-motion preferences—if a user prefers reduced motion, set duration to 0ms.
- Instant transitions can be disorienting if unexpected; consider providing context or progressive changes.
Troubleshooting
- No visible effect: duration 0ms renders the animation instant—set a nonzero duration to see the fade.
- Easing ignored: ensure transition/animation uses the –sd-easing variable.
- Property not applied: check the property name (use –sd-animation to follow CSS spec) and that styles are not overwritten.
Quick recommendations
- For a visible fade-in: use –sd-duration: 300ms; –sd-easing: ease-out;
- For respecting user preferences: add a media query for (prefers-reduced-motion: reduce) to set –sd-duration: 0ms.
- Use standard –double-dash custom properties to maximize compatibility.
If you want, I can convert this into a blog-ready post with examples tailored to a specific framework (React, Vue, or plain HTML/CSS).
Leave a Reply