Those look like custom CSS properties (variables) and a shorthand animation name likely used by a component library. Quick breakdown:
- -sd-animation: sd-fadeIn;
- Assigns a named animation (sd-fadeIn) to the element. The dash-prefixed name suggests a library-specific or vendor-prefixed custom property.
- –sd-duration: 0ms;
- Duration of the animation set to 0 milliseconds — effectively disables visible animation (instant).
- –sd-easing: ease-in;
- Timing function controlling acceleration; “ease-in” causes the animation to start slowly and speed up.
How they interact:
- If the component or CSS uses these variables to create an animation, setting duration to 0ms means no transition will be visible even though the animation name and easing are set. The easing is ignored when duration is zero.
Example usage (CSS):
css
.element {animation-name: var(–sd-animation, none); animation-duration: var(–sd-duration, 0ms); animation-timing-function: var(–sd-easing, linear);}If you want a visible fade-in, increase –sd-duration (e.g., 300ms) and ensure sd-fadeIn is defined, for example:
css
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}If you want, tell me where these are from (framework or file) and I can suggest exact changes.
Leave a Reply