Those look like custom CSS properties (variables) and a shorthand/custom declaration likely used by a framework or component library to control an animation. Briefly:
- -sd-animation: sd-fadeIn;
- A custom property indicating which animation to apply; “sd-fadeIn” is likely a keyframe animation name or an alias defined by the library.
- –sd-duration: 0ms;
- Sets animation duration to 0 milliseconds (effectively disables visible motion). If used with transitions/animations, nothing will animate.
- –sd-easing: ease-in;
- Sets the timing function to “ease-in”, meaning the animation will start slowly and speed up.
How they work together
- A component or stylesheet likely reads those custom properties and applies them to animation CSS like:
animation-name: var(–sd-animation);animation-duration: var(–sd-duration);animation-timing-function: var(–sd-easing); - With duration 0ms, the animation will instantly jump to the final state.
Notes and tips
- Confirm actual property names: your first token uses a single hyphen (-sd-animation) while the others use double hyphens (–sd-…). Standard CSS custom properties require the double-hyphen syntax (e.g., –sd-animation). A single-leading-hyphen name is invalid as a custom property and may be a vendor/library shorthand parsed outside CSS.
- If you want a visible fade-in, set –sd-duration to a positive value (e.g., 300ms) and ensure the animation keyframes exist:
–sd-duration: 300ms;–sd-easing: ease-in;–sd-animation: sd-fadeIn;@keyframes sd-fadeIn {from { opacity: 0; } to { opacity: 1; }} - For compatibility, you can apply variables to both animation and transition properties depending on implementation.
If you want, tell me where these are coming from (a library, a framework, or your CSS) and I can suggest exact fixes or a working snippet.
Leave a Reply