Those are CSS custom properties (CSS variables) likely used by a design system or animation utility. Briefly:
- –sd-animation: sd-fadeIn;
- Purpose: names the animation to apply (here, a fade-in defined elsewhere as @keyframes sd-fadeIn).
- –sd-duration: 250ms;
- Purpose: sets the animation duration to 250 milliseconds. Use in CSS as animation-duration: var(–sd-duration);
- –sd-easing: ease-in;
- Purpose: sets the timing function (easing). Use as animation-timing-function: var(–sd-easing);
Example usage:
css
.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(8px); } to { opacity: 1; transform: translateY(0); }}Adjustable tips:
- Make duration shorter for snappier UI or longer for dramatic entrance.
- Replace easing with cubic-bezier(…) for custom curves.
- Combine with prefers-reduced-motion checks to respect accessibility:
css
@media (prefers-reduced-motion: reduce) { .element { animation: none; }}
Leave a Reply