-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;

These are CSS custom properties (CSS variables) used to control an animation. Brief explanation:

• –sd-animation: sd-fadeIn;
  • Holds the animation name (here “sd-fadeIn”), which should match an @keyframes rule or a registered animation.
• –sd-duration: 250ms;
  • Duration of the animation. Use this value in the animation shorthand or animation-duration property.
• –sd-easing: ease-in;
  • Timing function (easing) for the animation. Use as animation-timing-function.

Example usage:

:root {–sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}
.element {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

Notes:

• You can override these variables on specific elements to change animation behavior.