fluxstoragehub1.sbs

for

Written by

pw

in

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

This article explains what the CSS custom properties in the title do, when to use them, and how to implement a small, practical example to create smooth fade-in animations for UI elements.

What these properties mean

  • -sd-animation: sd-fadeIn; — selects a named animation (here, a custom fade-in).
  • –sd-duration: 250ms; — sets the animation duration to 250 milliseconds.
  • –sd-easing: ease-in; — sets the timing function so the animation starts slowly and speeds up.

These look like CSS custom properties (variables) or a component library’s style tokens. The leading double hyphen (–) denotes standard CSS custom properties; a single hyphen prefix (like -sd-animation) is often used by design systems or frameworks to expose configurable tokens.

When to use them

Use this pattern when you want consistent, easily adjustable animations across components. Defining animation type, duration, and easing as variables allows theme-level control and runtime overrides.

Implementation patterns

  1. Pure CSS with custom properties and keyframes
css
:root {–sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
.fade-in {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}
  1. Scoped component override (e.g., per component)
css
.card {  –sd-duration: 400ms; /* slower for larger elements */}
  1. Accessible prefers-reduced-motion support
css
@media (prefers-reduced-motion: reduce) {  .fade-in { animation: none; }}

Practical example (HTML + CSS)

html
<div class=“card fade-in”>Hello — I fade in</div>

Use the CSS above; adjust variables on .card or inline styles to tweak behavior per-instance.

Tips and best practices

  • Keep durations short (150–400ms) for micro-interactions; longer for storytelling transitions.
  • Use easing that matches motion intent: ease-out for entering, ease-in for exits, ease-in-out for smooth both-ways.
  • Respect prefers-reduced-motion for accessibility.
  • Centralize tokens in :root or a theme file to maintain consistency.
  • Animate transform and opacity rather than layout properties for better performance.

Conclusion

Using CSS variables like –sd-duration and –sd-easing with a named animation lets you create flexible, themeable animations. They improve maintainability and make it easy to tune motion across your UI while keeping accessibility and performance in mind.

Comments

Leave a Reply

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

More posts