Using CSS Custom Properties for Smooth Animations: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”
CSS custom properties (variables) make animation control flexible and reusable. The declaration -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; combines a custom shorthand for selecting an animation with variables defining its duration and timing. Below is a concise guide to using this pattern effectively, with examples and best practices.
What these properties mean
- -sd-animation: sd-fadeIn; — a custom property (likely prefixed for a design system) indicating which animation to apply. It’s not a standard CSS property, so you’ll use it as a hook in your styles or scripts to map to real animation rules.
- –sd-duration: 250ms; — sets the animation duration using a CSS variable.
- –sd-easing: ease-in; — sets the animation-timing-function via a CSS variable.
How to implement
- Define keyframes:
css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}- Create a utility that maps the custom property to actual animation properties. You can use an attribute or class to carry the variables:
css
[data-sd-animation=“sd-fadeIn”] { animation-name: sd-fadeIn; animation-duration: var(–sd-duration, 250ms); animation-timing-function: var(–sd-easing, ease-in); animation-fill-mode: both;}- Apply on an element:
html
<div data-sd-animation=“sd-fadeIn” style=”–sd-duration: 250ms; –sd-easing: ease-in;”> Fade-in content</div>Advanced usage
- Override variables per-element for different timings without creating new classes.
- Use JavaScript to toggle the attribute or update variables dynamically for interactive effects.
- Combine with prefers-reduced-motion to respect user accessibility settings:
css
@media (prefers-reduced-motion: reduce) { [data-sd-animation] { animation: none !important; transition: none !important; }}Best practices
- Keep custom property names consistent and namespaced (e.g., –sd-) to avoid collisions.
- Provide sensible defaults in CSS to ensure predictable behavior.
- Use short durations for subtle UI transitions; reserve longer ones for attention-grabbing motions.
- Test across browsers; older browsers may require fallbacks.
Example: JavaScript toggle
js
const el = document.querySelector(’#toast’);el.style.setProperty(’–sd-duration’, ‘300ms’);el.setAttribute(‘data-sd-animation’, ‘sd-fadeIn’);// remove to replayel.removeAttribute(‘data-sd-animation’);void el.offsetWidth; // trigger reflowel.setAttribute(‘data-sd-animation’, ‘sd-fadeIn’);This pattern yields a modular, accessible approach to animations where designers can tweak timings without changing CSS rules.
Leave a Reply