Ways

Written by

ge9mHxiUqTAm

in

Uncategorized

These are CSS custom properties (CSS variables) used to configure a design-system animation. Breakdown:

• -sd-animation: sd-fadeIn;
  • Selects the animation by name (likely defined elsewhere as @keyframes sd-fadeIn or a class that applies that keyframes).
  • Example purpose: trigger a fade-in effect.
• –sd-duration: 0ms;
  • Sets the animation duration to 0 milliseconds — effectively no visible animation (instant).
  • Can be overridden to e.g., 200ms, 500ms, etc.
• –sd-easing: ease-in;
  • Defines the timing function/easing for the animation.
  • Common values: linear, ease, ease-in, ease-out, cubic-bezier(…).

Usage notes and example:

• These variables need corresponding CSS that consumes them, e.g.:
  .animated {animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

• With the values you provided, the element would use the sd-fadeIn keyframes but the 0ms duration means the change happens instantly; set a nonzero –sd-duration to see the fade.
• @keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(4px); }  to   { opacity: 1; transform: translateY(0); }}

Adjust duration and easing to control speed and feel.