-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;
CSS custom properties and utility tokens like -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; let developers create small, reusable animation patterns that are easy to apply and maintain. This article explains what each part means, why you’d use this pattern, and how to implement and extend it for accessible, performant UI transitions.
What these tokens represent
- -sd-animation: a shorthand token naming the animation pattern (here
sd-fadeIn). - –sd-duration: controls how long the animation runs (
250ms). - –sd-easing: sets the timing function (
ease-in) to shape the animation curve.
These are CSS custom properties and a project-specific property that can be read by CSS, JS, or preprocessor code to drive animations consistently across components.
Why use tokenized animation properties
- Consistency: centralizes timing and easing so components match.
- Reusability: swap tokens to change animation behavior without editing component CSS.
- Theming: durations and easing can be adjusted per theme or motion-preference settings.
- Performance: using opacity and transform (not layout-affecting properties) keeps animations smooth.
Implementing a basic fade-in using the tokens
- Define a keyframes animation:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}- Provide sensible defaults:
:root { –sd-duration: 250ms; –sd-easing: ease-in;}- Create a utility that applies the animation when a token is present:
[data-sd-animation=“sd-fadeIn”] { animation-name: sd-fadeIn; animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}Respecting user motion preferences
Honor reduced-motion settings by disabling or shortening animations:
@media (prefers-reduced-motion: reduce) { [data-sd-animation=“sd-fadeIn”] { animation-duration: 0.001ms; animation-delay: 0ms; }}Extending the pattern
- Add tokens for delay (
–sd-delay) and iteration count (–sd-iterations). - Create additional animation tokens (e.g.,
sd-slideIn,sd-scaleUp). - Expose tokens in component APIs so developers can override per instance.
Best practices
- Animate only opacity and transform where possible.
- Keep durations short for micro-interactions (150–300ms).
- Use easing curves that match the interaction: ease-out for enter, ease-in for exit.
- Provide clear state transitions (enter/exit) to avoid jank.
Example usage in HTML
<div data-sd-animation=“sd-fadeIn” style=”–sd-duration:200ms; –sd-easing:cubic-bezier(.2,.9,.3,1)”> Hello, animated world!</div>Tokenized animation properties like -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; provide a lightweight, consistent way to manage UI motion across a codebase while keeping accessibility and performance in mind.
Leave a Reply