fluxstoragehub3.cfd

Productivity

Written by

pw

in

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

CSS custom properties (variables) like -sd-animation, –sd-duration, and –sd-easing provide a compact, reusable way to control animations across a component library or site. In this article I’ll explain what these properties mean, how to use them, and give practical examples and best practices for integrating them into your CSS and component design system.

What these properties do

  • -sd-animation: Likely a custom shorthand used by a design system (here named “sd”) to specify a named animation preset, e.g., sd-fadeIn.
  • –sd-duration: Sets the animation duration; 250ms means a quarter of a second.
  • –sd-easing: Sets the timing function; ease-in accelerates from zero velocity.

Together they declaratively control how an element animates without hardcoding animation details in multiple places.

Defining the animation

First define the keyframes and a CSS class that maps the custom properties into real animation rules:

css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/* default values for the design system /:root {  –sd-duration: 250ms;  –sd-easing: ease-in;  –sd-delay: 0ms;  –sd-iteration: 1;}
/ helper that converts the named animation into animation shorthand /.sd-anim {  animation-name: var(–sd-animation, sd-fadeIn);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-delay: var(–sd-delay);  animation-iteration-count: var(–sd-iteration);  animation-fill-mode: both;}

Using the properties in components

Apply the variables on elements or component roots to change behavior without touching the class:

html
<div class=“sd-anim” style=”–sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”>  Fade-in content</div>
<div class=“sd-anim” style=”–sd-duration: 150ms; –sd-easing: cubic-bezier(.2,.9,.3,1); –sd-animation: sd-slideUp;”>  Slide-up content</div>

Making presets

Create named presets so developers can use semantic tokens:

css
:root {  –sd-anim-fast: “sd-fadeIn 150ms ease-out”;  –sd-anim-slow: “sd-fadeIn 400ms ease-in-out”;}
/ or helper classes */.sd-anim–fast { –sd-duration: 150ms; –sd-easing: ease-out; }.sd-anim–slow { –sd-duration: 400ms; –sd-easing: ease-in-out; }

Accessibility considerations

  • Prefer reduced-motion support:
css
@media (prefers-reduced-motion: reduce) {  .sd-anim { animation: none !important; transition: none !important; }}
  • Avoid very fast animations that can be disorienting. 150–300ms is usually comfortable for micro-interactions.
  • Ensure animations don’t cause layout shifts that break focus or reading order.

Performance tips

  • Animate transform and opacity where possible to use compositor layers and avoid layout paints.
  • Limit the number of simultaneously animating elements.
  • Use will-change sparingly to hint the browser.

Example: reusable modal animation

css
@keyframes sd-scaleIn {  from { opacity: 0; transform: scale(.98); }  to   { opacity: 1; transform: scale(1); }}
.modal {   –sd-animation: sd-scaleIn;  –sd-duration: 200ms;  –sd-easing: cubic-bezier(.2,.9,.3,1);}

Conclusion

Using custom properties like -sd-animation, –sd-duration, and –sd-easing creates a flexible, declarative system for managing animations across components. Define clear presets, respect user motion preferences, and stick to performant properties to keep UI expressive and accessible.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts