These look like custom CSS properties (CSS variables) used to control a “sd-animation” system. Short explanation:
- sd-animation: sd-fadeIn;
- Selects an animation named “sd-fadeIn” (likely defined with @keyframes elsewhere).
- –sd-duration: 0ms;
- Animation duration set to 0 milliseconds — effectively disables visible animation (instant change).
- –sd-easing: ease-in;
- Timing function for the animation easing curve; “ease-in” accelerates from slow to fast.
Practical notes:
- Ensure @keyframes sd-fadeIn exists and that the element’s animation property references these variables (e.g., animation: var(–sd-duration) var(–sd-easing) var(–sd-delay) var(–sd-fill-mode) var(–sd-iteration) var(–sd-direction) var(–sd-animation);).
- With –sd-duration: 0ms the easing has no effect visually; use a nonzero duration (e.g., 300ms) to see easing.
- To override per element, set the variables on that element or a parent.
- For smoother control, also define –sd-delay, –sd-fill-mode (forwards), and –sd-iteration if needed.
If you want, I can:
- provide a minimal CSS example showing sd-fadeIn and these variables in use, or
- suggest durations/easings for common UX patterns.
Leave a Reply