astralpacketcore1.xyz

Ways

Written by

ge9mHxiUqTAm

in

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

These CSS custom properties create a small, reusable animation system you can drop into components. Below is a concise guide showing what each property does, how to use them together, and practical examples.

What each property means

  • -sd-animation: the animation name or preset (here sd-fadeIn) that defines keyframe behavior.
  • –sd-duration: how long the animation runs (here 250ms).
  • –sd-easing: the timing function controlling acceleration (here ease-in).

How it works

Define a CSS keyframes block for the named preset (sd-fadeIn) and a base rule that maps the custom properties to the animation shorthand. Components can override the properties to change behavior without touching keyframes.

Example CSS

css
:root {–sd-duration: 250ms;  –sd-easing: ease-in;}
/* define preset /@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/ base utility using the custom properties */.sd-animate {  animation-name: var(–sd-animation, sd-fadeIn);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

Usage in HTML

html
<button class=“sd-animate” style=”–sd-duration: 400ms; –sd-easing: cubic-bezier(.2, .8, .2, 1);”>  Click me</button>

Tips

  • Use different presets (e.g., sd-slideUp, sd-scaleIn) for variety.
  • Keep durations short (150–400ms) for UI responsiveness.
  • Combine with prefers-reduced-motion to respect accessibility.

Accessibility

Respect users’ motion preferences:

css
@media (prefers-reduced-motion: reduce) {  .sd-animate { animation: none !important; }}

This system keeps animations consistent and easily customizable across your UI.

Comments

Leave a Reply

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

More posts