p]:inline” data-streamdown=”list-item”>DBManager Freeware for PostgreSQL: Best Practices for Reliable DB Admin

Article: How to Use CSS Custom Properties for Animations — –sd-animation, –sd-duration, –sd-easing

Custom properties (CSS variables) make animation control flexible and reusable across a project. In this article we’ll explain the three properties you provided — –sd-animation, –sd-duration, and –sd-easing — show practical examples, and offer tips for accessibility and performance.

What these variables represent

• –sd-animation — stores the animation name or shorthand (e.g., sd-fadeIn or sd-fadeIn 250ms).
• –sd-duration — stores the duration of the animation (e.g., 250ms).
• –sd-easing — stores the timing function/easing (e.g., ease-in).

Defining a reusable animation

First, define a keyframes animation:

@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

Next, define the variables on a root selector so they’re available globally:

:root {  –sd-animation: sd-fadeIn;  –sd-duration: 250ms;  –sd-easing: ease-in;}

Using the variables with the animation property

You can compose the full animation shorthand by referencing the variables:

.fade-in {  animation: var(–sd-animation) var(–sd-duration) var(–sd-easing) both;}

This results in the element using sd-fadeIn 250ms ease-in both.

Overriding per component or state

Variables can be overridden at any scope to adjust behavior:

.card {  –sd-duration: 400ms;  –sd-easing: cubic-bezier(0.22, 1, 0.36, 1);}
.menu-item {  –sd-animation: sd-fadeIn;  –sd-duration: 180ms;}

Combining with prefers-reduced-motion

Respect users who request reduced motion:

@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms; }  .fade-in { animation: none; opacity: 1; transform: none; }}

Performance tips

• Prefer CSS transitions for simple state changes; use keyframes for complex sequences.
• Keep animations short and avoid animating layout-triggering properties (width/height/left/top).