These are custom CSS properties (custom properties / variables) and a property-like shorthand likely used by a design system or a UI library to control animation behavior. Briefly:
- -sd-animation: sd-fadeIn;
- References a named animation (likely a keyframes animation defined elsewhere) called “sd-fadeIn”.
- –sd-duration: 0ms;
- Sets the animation duration to 0 milliseconds — effectively disabling visible animation (instant).
- –sd-easing: ease-in;
- Sets the timing function/easing to “ease-in” for the animation.
Usage notes:
- These are custom properties (CSS variables). In CSS they should use two dashes: –sd-animation, –sd-duration, –sd-easing. The leading single dash (-sd-animation) in your example looks like a typo or a nonstandard convention; standard custom properties must start with –.
- A typical pattern uses variables inside animation shorthand, e.g.:
css
–sd-animation: sd-fadeIn;–sd-duration: 300ms;–sd-easing: ease-in; .element {animation: var(–sd-animation) var(–sd-duration) var(–sd-easing) both;} - If duration is 0ms, consider using animation: none; or removing the animation to avoid unnecessary repaints.
- Ensure the keyframes for sd-fadeIn are defined:
css
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}
Compatibility:
- CSS variables and animations are widely supported in modern browsers; IE11 has limited support for CSS variables.
- Use fallbacks if supporting older browsers.
Leave a Reply