These look like CSS custom properties (CSS variables) used by a component or design system to control an animation. Briefly:
- –sd-animation: sd-fadeIn;
- Name of the animation to apply. Likely refers to a keyframes animation called “sd-fadeIn” (a system-specific naming convention).
- –sd-duration: 250ms;
- Duration of the animation (250 milliseconds).
- –sd-easing: ease-in;
- Timing function controlling acceleration (starts slowly then speeds up).
How they’re used (example):
.element {animation-name: var(–sd-animation); animation-duration: var(–sd-duration, 250ms); animation-timing-function: var(–sd-easing, ease-in); animation-fill-mode: both;}@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
Notes:
- Ensure the referenced keyframes (sd-fadeIn) exist.
- You can override these variables on specific elements or in different states (e.g., :hover).
- Use sensible fallbacks when reading custom properties (as shown) for broader browser support.
Leave a Reply