Understanding and Using CSS Custom Properties: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”
CSS custom properties (variables) let you centralize and reuse values across your stylesheets. The declaration shown—-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;—appears to combine a nonstandard prefixed custom property and two standard custom properties to control an animation. This article explains what each part does, how to implement them practically, and how to build a small, reusable fade-in animation system around these variables.
What these properties represent
- -sd-animation: sd-fadeIn;
- Likely a vendor- or framework-specific custom property naming convention (the
-sd-prefix suggests a scoped or library-specific variable). It stores the name of an animation to apply, heresd-fadeIn.
- Likely a vendor- or framework-specific custom property naming convention (the
- –sd-duration: 250ms;
- A standard CSS custom property defining the animation duration.
- –sd-easing: ease-in;
- A standard CSS custom property for the animation timing function.
Using variables like these makes it easy to adjust animations consistently without rewriting keyframe rules or multiple declarations.
Defining the keyframes
Create a keyframe animation named sd-fadeIn:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}This provides a subtle upward fade as elements appear.
Building a reusable animation utility
Define a CSS utility that reads the variables and applies the animation:
.anim { animation-name: var(-sd-animation, none); animation-duration: var(–sd-duration, 250ms); animation-timing-function: var(–sd-easing, ease-in); animation-fill-mode: both;}Notes:
- var(-sd-animation, none) uses the prefixed property; include a fallback (
none) for safety.
Leave a Reply