astralpacketcore1.xyz

Issues

Written by

ge9mHxiUqTAm

in

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

This article explains the CSS custom properties shown in the title and demonstrates how to use them to create a reusable fade-in animation system for web components and utility classes.

What these properties mean

  • -sd-animation: the animation name or shorthand controlling which animation to apply (here sd-fadeIn).
  • –sd-duration: duration of the animation (here 250ms).
  • –sd-easing: easing/timing function for the animation (here ease-in).

Using custom properties lets you define animation behavior once and override it per-component or per-instance without repeating keyframe definitions or animation shorthand.

Define the keyframes and base animation

Create a base animation tied to the custom property value. Use a CSS variable fallback to ensure a sensible default.

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); }}
/* Utility class that applies the animation using the custom properties /.sd-animate {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;  will-change: opacity, transform;}

Applying to components with overrides

You can override the variables per element to change behavior without new keyframes.

html
<div class=“sd-animate” style=”–sd-duration: 500ms; –sd-easing: cubic-bezier(.2,.8,.2,1);”>  Slower, custom easing fade-in</div>
<div class=“sd-animate” style=”–sd-animation: sd-fadeIn; –sd-duration: 150ms;”>  Faster fade-in</div>

Accessibility considerations

  • Respect reduced-motion preferences:
css
@media (prefers-reduced-motion: reduce) {  .sd-animate { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }}
  • Use animations sparingly and avoid causing layout shifts that hinder readability.

Advanced: multiple animation presets

Define alternative keyframes and switch via the variable.

css
@keyframes sd-slideUp {  from { opacity: 0; transform: translateY(12px); }  to   { opacity: 1; transform: translateY(0); }}
/ Example usage */.card { –sd-animation: sd-slideUp; –sd-duration: 300ms; }

Benefits

  • Centralized control of animation behavior
  • Easy per-element customization
  • Reduced CSS duplication
  • Better maintainability for design systems

Conclusion

Using CSS custom properties like –sd-animation, –sd-duration, and –sd-easing creates a flexible, maintainable way to manage animations across a project. Define keyframes once, expose simple variables, and override them where needed for consistent, accessible motion.

Comments

Leave a Reply

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

More posts