list-item

CSS custom properties: sd-animation, –sd-duration, –sd-easing

These look like custom CSS properties (CSS variables) used to control a component’s animation. Here’s a concise breakdown and example usage.

What they do

• sd-animation: likely holds the animation name or shorthand (here “sd-fadeIn”) to apply via a property-aware stylesheet or JS.
• –sd-duration: animation duration (here 0ms — effectively no visible animation).
• –sd-easing: timing function (here “ease-in”).

How to apply in CSS

.my-element {/* define variables /  –sd-animation: sd-fadeIn;  –sd-duration: 0ms;  –sd-easing: ease-in;
  / use variables to drive animation */  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

• With –sd-duration: 0ms the animation is instantaneous; set a higher value (e.g., 200ms) for visible effect.
• These names are arbitrary; ensure the component consuming them expects those variable names.