These are CSS custom properties (CSS variables) defining an animation’s name, duration, and easing. Breakdown:
- -sd-animation: sd-fadeIn;
- Sets the animation identifier or class the UI should run. Here it names the animation “sd-fadeIn” (a fade-in effect).
- –sd-duration: 0ms;
- Duration of the animation. 0ms means the animation runs instantly (no visible transition).
- –sd-easing: ease-in;
- Timing function controlling animation pacing; “ease-in” starts slowly and accelerates.
Practical notes:
- With duration 0ms the easing and animation name have no visible effect; set a positive duration (e.g., 200ms) to see the fade.
- Use these variables in CSS rules, for example:
css
.element {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);}@keyframes sd-fadeIn { from { opacity: 0; } to { opacity: 1; }}
Leave a Reply