These look like custom CSS (likely CSS custom properties) used to control a lightweight animation system. Brief breakdown:
- -sd-animation: sd-fadeIn;
- Selects the animation to apply (here a named animation “sd-fadeIn”). This is a custom property (prefixed with a dash) not a standard CSS property.
- –sd-duration: 0ms;
- Sets the animation duration to 0 milliseconds — effectively no visible animation (instant).
- –sd-easing: ease-in;
- Sets the timing function for the animation to ease-in (slow start, faster end).
How they’re typically used
- Defined on an element (or :root) as custom properties:
–sd-animation: sd-fadeIn;
–sd-duration: 300ms;
–sd-easing: ease-in-out; - Consumed by real CSS rules or a small JS/CSS framework that maps the custom property values to actual keyframes, transition/timing declarations, or class toggles. Example consumer rules might set animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);
Notes and tips
- 0ms duration disables visible motion — use at least ~150–200ms for perceptible effects.
- Ensure the consumer (CSS or JS) implements the mapping; custom properties alone do nothing unless referenced.
- Use consistent naming (avoid starting custom properties with a single dash; conventionally use –prefix) — leading single dash (like -sd-animation) is allowed by CSS? Single-dash identifiers are valid but uncommon; prefer –sd-animation.
- For accessibility, respect reduced-motion preferences (prefers-reduced-motion) and provide no/shorter animations accordingly.
Leave a Reply