These look like CSS custom properties and a custom animation shorthand likely used by a design system or component library. Briefly:
- -sd-animation: sd-fadeIn;
- Likely a custom property specifying which named animation to apply (here, “sd-fadeIn”).
- –sd-duration: 0ms;
- Sets the animation duration to 0 milliseconds — effectively disabling visible animation so the change is instantaneous.
- –sd-easing: ease-in;
- Sets the animation timing function to “ease-in”, which accelerates from slow to fast.
Practical notes:
- If duration is 0ms, easing has no visible effect.
- To enable the fade-in, set –sd-duration to a positive value (e.g., 300ms).
- Ensure the animation name (sd-fadeIn) is defined in @keyframes or by the library; otherwise nothing will run.
- Example CSS usage:
.my-element {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);}
That’s all — change the duration to see the fade-in.
Leave a Reply