Those look like CSS custom properties (CSS variables) used by a library or design system to control animation. Briefly:
- –sd-animation: sd-fadeIn;
- Likely selects a named keyframe or animation preset (here, “sd-fadeIn” — a fade-in effect).
- –sd-duration: 0ms;
- Duration of the animation; 0ms means no visible animation (instant).
- –sd-easing: ease-in;
- Timing function controlling animation acceleration (starts slowly, then speeds up).
Practical notes:
- If these are applied to an element, you need corresponding CSS that reads them, e.g.:
.element {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);} - Ensure –sd-animation matches a defined @keyframes name (e.g., @keyframes sd-fadeIn { from { opacity:0 } to { opacity:1 } }).
- Set a nonzero –sd-duration (e.g., 300ms) to see motion; combine with animation-delay, fill-mode, and iteration-count as needed.
Leave a Reply