ordered-list

These look like custom CSS properties used to control a small animation. Breakdown:

• -sd-animation: sd-fadeIn;
  • Likely a custom property naming an animation preset (e.g., a keyframes animation called sd-fadeIn).
• –sd-duration: 250ms;
  • Duration of the animation (250 milliseconds).
• –sd-easing: ease-in;
  • Timing function controlling acceleration (starts slowly, speeds up).

How they work together (typical usage):

• A component reads these custom properties and applies them to an element, for example:
  .element {animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

• The named animation (sd-fadeIn) would be defined with @keyframes, e.g.:
  @keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

Tips:

• Use consistent naming: custom properties usually begin with –; a leading dash-only name (-sd-animation) is allowed but unconventional.
• Provide fallbacks: animation-name: var(–sd-animation, none);
• Pair duration units (ms/s) and valid easing keywords or cubic-bezier() values.
• For accessibility, respect prefers-reduced-motion by disabling or shortening animations:
  @media (prefers-reduced-motion: reduce) {  .element { animation: none; }}

If you want, I can:

• Convert these into a complete CSS snippet for a component,
• Suggest alternate easing or duration values for different UX contexts,
• Explain how to toggle this animation with JavaScript.