list-inside list-disc whitespace-normal [li_&]:pl-6

These look like CSS custom properties (CSS variables) used by a design system or library to control an animation. Explanation:

–sd-animation: sd-fadeIn;
- Names the animation to apply. Likely refers to a keyframe or predefined animation called “sd-fadeIn” that performs a fade-in effect.
–sd-duration: 0ms;
- Sets the animation duration. “0ms” means the animation runs instantly (no visible animation). Use a value like “300ms” or “0.3s” to see a fade.
–sd-easing: ease-in;
- Sets the timing function (easing) for the animation. “ease-in” makes the animation start slowly and speed up.

How these are used (typical pattern):

A component reads these variables and maps them to CSS animation properties, for example:

animation-name: var(–sd-animation);animation-duration: var(–sd-duration);animation-timing-function: var(–sd-easing);animation-fill-mode: both;

Or the library may translate the variables into inline styles or utility classes.

Practical notes:

With –sd-duration: 0ms the easing has no visible effect because there’s no duration.
To disable animation while preserving other settings, 0ms is a common choice.
Ensure the named animation (sd-fadeIn) exists as @keyframes in your CSS or is provided by the framework.
For accessibility, respect prefers-reduced-motion: set duration to 0 or skip animations when users prefer reduced motion.

If you want, I can:

Comments