Understanding ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”
This CSS snippet defines three custom properties used to control a simple fade-in animation.
What each part does
- -sd-animation: sd-fadeIn;
Selects the animation variant (here namedsd-fadeIn). This is a custom property — you need corresponding CSS that uses it (e.g., applied as the animation-name). - –sd-duration: 0ms;
Sets the animation duration to 0 milliseconds. That effectively disables visible animation; the final state applies immediately. - –sd-easing: ease-in;
Sets the timing function toease-in, meaning the animation (if duration > 0) would start slowly and speed up.
How to use it in CSS
Provide keyframes for the named animation and read the custom properties when declaring the animation:
css
:root {–sd-animation: sd-fadeIn; –sd-duration: 300ms; /* override default 0ms to see effect / –sd-easing: ease-in;}
/ Keyframes for sd-fadeIn /@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }}
/ Utility class that applies the animation using the custom properties */.sd-animated { animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}Practical notes
- With
–sd-duration: 0ms, elements will jump to the final state instantly; set a positive duration (e.g., 200–400ms) to see a smooth fade. - Store animation name and parameters as custom properties to allow easy overrides per component or state.
- Include
animation-fill-mode: bothso the end state persists after the animation. - Combine opacity with slight translate for a more natural entrance.
Example usage in HTML
html
<div class=“sd-animated” style=”–sd-duration: 250ms;”> Content that fades in</div>This applies the sd-fadeIn animation with a 250ms duration and ease-in timing, producing a subtle upward fade-in.
Leave a Reply