dataprismcore5.cyou

Up

Written by

pw

in

Understanding CSS Custom Properties: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”

CSS custom properties (variables) let developers define reusable values and create flexible, maintainable styles. The three declarations shown—-sd-animation, –sd-duration, and –sd-easing—are examples of custom properties that can be used to standardize animation behavior across a project. This article explains what they do, how to use them, and gives practical examples.

What these properties represent

  • –sd-animation: A custom property holding the name or shorthand of an animation (here “sd-fadeIn”). It lets you switch animation types centrally without changing many rules.
  • –sd-duration: Specifies the animation duration (here 250ms). Using a variable makes it easy to tweak timing globally or per-component.
  • –sd-easing: Holds the timing function (here ease-in) that defines acceleration of the animation.

Why use custom properties for animations

  • Consistency: Apply the same timing and easing across components.
  • Theming: Easily adjust motion intensity per theme (e.g., reduced motion for accessibility).
  • Maintainability: Change values in one place rather than updating many selectors.
  • Composability: Combine with other properties (delay, fill-mode) to build predictable animation systems.

Example: Fade-in animation using these variables

CSS:

css
:root {–sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(4px); }  to   { opacity: 1; transform: translateY(0); }}
.card {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

HTML:

html
<div class=“card”>Content that fades in</div>

Variants and overrides

You can override variables per component or state:

css
.toast {  –sd-duration: 400ms;  –sd-easing: cubic-bezier(.2, .9, .3, 1);}

Or disable animation for users preferring reduced motion:

css
@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms; }  .card { animation: none; }}

Tips for practical use

  • Use descriptive names (e.g., –sd-fade-duration) if your project has many motion types.
  • Keep durations consistent with UX patterns: short (100–250ms) for micro-interactions, medium (300–600ms) for transitions, longer for storytelling.
  • Test animations for performance; avoid animating layout-heavy properties on large numbers of elements.
  • Consider pairing variables with CSS Custom Property fallbacks for older browsers:
    animation-duration: var(–sd-duration, 250ms);

Conclusion

Defining animation behavior via custom properties like –sd-animation, –sd-duration, and –sd-easing creates a scalable, themeable motion system. Use them to centralize animation definitions, respect accessibility preferences, and keep your styles easy to maintain.

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

More posts