Those look like custom CSS properties (CSS variables) likely used by a design system or component library to control animation behavior. Breakdown:
- -sd-animation: sd-fadeIn;
- Stores the animation name or preset to apply (here, a fade-in animation labeled “sd-fadeIn”).
- –sd-duration: 0ms;
- Duration of the animation. “0ms” means the animation runs instantly (no visible transition).
- –sd-easing: ease-in;
- Timing function that controls acceleration. “ease-in” starts slowly and speeds up.
How they’re used (example):
.element {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);}@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
Notes:
- Using CSS variables lets you change animation presets per-component or at runtime.
- A duration of 0ms disables visible animation; set to something like 200ms–400ms for smooth fades.
Leave a Reply