Using CSS Custom Properties for Smooth Fade-In Animations
CSS custom properties (variables) let you centralize animation settings for consistency and easy updates. The snippet –sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; defines three variables that can be used to control an element’s fade-in effect. Below is a short guide and example showing how to implement and reuse these variables.
Define the animation and defaults
Create a keyframes rule for the fade-in effect and set default values on a root or component selector:
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}
/* Defaults */:root { –sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;}Apply the animation using the variables
Use the variables where you need the effect. This keeps behavior consistent and makes runtime overrides simple.
.fade-in { animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both;}Component-level overrides
Override variables on specific components or states without changing the underlying CSS rules:
.card { –sd-duration: 400ms; –sd-easing: cubic-bezier(.2,.8,.2,1);}
.toast { –sd-duration: 150ms; –sd-easing: ease-out;}Accessibility considerations
- Respect user preferences: disable motion when the user prefers reduced motion.
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; opacity: 1; transform: none; }}- Keep durations short (150–400ms) for snappy UX, and avoid large transforms that can disorient users.
Practical tips
- Use
animation-fill-mode: bothto ensure the end state persists. - Combine with CSS variables for delays (
–sd-delay) and iteration counts (–sd-iteration) if needed. - Use meaningful variable naming and group related variables at the component level.
This variable-driven approach makes fade-in animations easy to maintain, theme, and customize across a site or application.
Leave a Reply