Those look like custom CSS properties (CSS variables) used to drive an animation system. Short explanation:
- –sd-animation: sd-fadeIn;
- A custom property naming which animation to run (here, “sd-fadeIn” — likely a predefined keyframes animation that fades an element in).
- –sd-duration: 0ms;
- Animation duration. 0ms means the animation has no visible time to play (instant), so the element will jump immediately to its final state.
- –sd-easing: ease-in;
- Timing function controlling animation pacing; “ease-in” starts slow and speeds up.
How they’re typically used
- Defined on an element (or :root) as CSS variables, then referenced by the animation-related rules:
Example pattern:.anim {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;} - A 0ms duration effectively disables the visible animation — use a positive duration (e.g., 200ms) for a smooth fade.
Notes and tips
- Ensure the keyframes for sd-fadeIn exist, e.g.:
@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }} - You can override per-element by setting those variables inline or with a more specific selector.
- For accessibility, avoid relying solely on motion for important information; provide reduced-motion alternatives (respect prefers-reduced-motion).
Leave a Reply