stellarbackupnode5.cfd

&

Written by

pw

in

Using CSS Custom Properties for Animation: ”-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”

This article explains how to use CSS custom properties (CSS variables) like -sd-animation, –sd-duration, and –sd-easing to control animations in a modular, themeable way. We’ll cover what each property does, how to define reusable keyframes, how to apply them with fallbacks, and examples for practical use.

What these properties represent

  • -sd-animation: a shorthand custom property naming which animation keyframes to use (e.g., sd-fadeIn).
  • –sd-duration: animation duration (e.g., 0ms, 200ms, 500ms).
  • –sd-easing: the timing-function / easing (e.g., ease-in, linear, cubic-bezier(…)).

Using variables lets you change animation behavior from a single place or swap animations per component/state.

Defining the keyframes and defaults

Provide one or more keyframe sets and sensible defaults so components behave even if a variable isn’t set:

css
:root {–sd-duration: 200ms;  –sd-easing: ease;  –sd-fill-mode: both;  /* default animation name used by -sd-animation fallback /  –sd-animation-name: sd-fadeIn;}
/ keyframes /@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
@keyframes sd-fadeOut {  from { opacity: 1; transform: translateY(0); }  to   { opacity: 0; transform: translateY(-6px); }}

Component-level usage

Create a generic animation utility that reads the variables and applies the resolved animation:

css
.animated {  animation-name: var(–sd-animation-name, none);  animation-duration: var(–sd-duration, 200ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: var(–sd-fill-mode, both);}
/ allow shorthand-style property -sd-animation to set a name /:root {  / no-op: keeps naming consistent if using JS to set -sd-animation */}

Because custom properties cannot directly set the animation-name when used as its own name (browser behavior differs), use a mapping or set a secondary variable (–sd-animation-name) from -sd-animation via inline styles or JS:

html
<div class=“animated” style=”–sd-animation-name: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;”>  Content</div>

Controlling via CSS classes

Provide utility classes to switch animations without inline styles:

css
.sd-fadeIn { –sd-animation-name: sd-fadeIn; }.sd-fadeOut { –sd-animation-name: sd-fadeOut; }
.sd-duration-0 { –sd-duration: 0ms; }.sd-duration-200 { –sd-duration: 200ms; }
.sd-ease-in { –sd-easing: ease-in; }.sd-ease-out { –sd-easing: ease-out; }

Usage:

html
<div class=“animated sd-fadeIn sd-duration-0 sd-ease-in”>Instant appear</div>

JavaScript control for dynamic behavior

When you need to toggle animations dynamically, set variables via style:

js
const el = document.querySelector(’.animated’);el.style.setProperty(’–sd-animation-name’, ‘sd-fadeIn’);el.style.setProperty(’–sd-duration’, ‘0ms’);el.style.setProperty(’–sd-easing’, ‘ease-in’);el.classList.add(‘sd-active’); // trigger if needed

If you want to restart an animation, reset animation-name to ‘none’ then reapply.

Accessibility and performance notes

  • Prefer reduced-motion support: respect user preference by disabling or shortening animations when prefers-reduced-motion is set.
  • Avoid 0ms unless intentionally skipping animation; 0ms effectively makes it instantaneous.
  • Use transforms and opacity (GPU-accelerated) instead of layout-affecting properties for smoother animations.
css
@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms !important; }}

Example: Putting it together

Your email address will not be published. Required fields are marked *

More posts