-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;
This article explains a set of CSS custom properties used to control a simple animation — specifically a fade-in — and how to apply them effectively in modern web projects.
What these properties mean
- -sd-animation: custom shorthand identifying the animation to run (here,
sd-fadeIn). - –sd-duration: duration of the animation.
0msmeans no visible transition; increasing this creates the fade effect. - –sd-easing: timing function controlling acceleration;
ease-instarts slowly and speeds up.
Defining the fade-in animation
Create a CSS keyframes block named sd-fadeIn that transitions opacity and optionally vertical position for a subtle entrance.
css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }}Using the custom properties
Bind the custom properties to actual animation rule values so elements using them animate consistently.
css
:root { –sd-duration: 0ms; /* default — instantaneous / –sd-easing: ease-in; –sd-fill-mode: both;}
/ Utility class that reads the custom properties */.sd-animated { animation-name: var(–sd-animation, sd-fadeIn); animation-duration: var(–sd-duration, 250ms); animation-timing-function: var(–sd-easing, ease-in); animation-fill-mode: var(–sd-fill-mode, both);}Practical usage and variations
- Instant (no visible animation)
- Use when you want the element to appear without transition:
–sd-duration: 0ms;
- Use when you want the element to appear without transition:
- Gentle fade
- –sd-duration: 300ms; –sd-easing: ease-out;
- Snappy entrance
- `–sd-duration: 120ms; –sd-easing: cubic-bezier(.2, .8, .2, 1);
Example inline usage:
html
<div class=“sd-animated” style=”–sd-duration: 350ms;”>Hello</div>Accessibility considerations
- Respect prefers-reduced-motion: disable or shorten animations for users who request reduced motion.
css
@media (prefers-reduced-motion: reduce) { :root { –sd-duration: 0ms; }}Tips
- Keep durations between 150–400ms for most micro-interactions.
- Combine opacity with slight translate for a more natural effect.
- Use descriptive custom property names if integrating with a design system.
Conclusion
These custom properties provide a flexible way to control a fade-in animation centrally. Setting –sd-duration: 0ms disables visible motion, while adjusting –sd-easing and duration tailors the feel. Implement with accessibility in mind for the best user experience.
Leave a Reply