dataprismcore4.sbs

GS-201:

Written by

pw

in

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

This article explains a compact pattern for controlling CSS animations using custom properties, demonstrated with the example declaration:
-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;

Concept

Using CSS custom properties (variables) to parameterize animation behavior makes styles more reusable and easy to tweak. Here the pattern separates:

  • the animation selection (-sd-animation),
  • the duration (–sd-duration), and
  • the easing (–sd-easing).

This lets different components pick the same animation with different timings or easings without duplicating keyframes.

Example implementation

CSS:

css
:root {–sd-duration: 250ms;  –sd-easing: ease-in;}
/* Define animation keyframes /@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/ Base utility that reads custom properties /.sd-animated {  animation-name: var(–sd-animation, sd-fadeIn);  animation-duration: var(–sd-duration, 250ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;}
/ Example modifier to select the animation via a custom property on the element */[data-sd=“fade-in”] { –sd-animation: sd-fadeIn; }

HTML:

html
<button class=“sd-animated” data-sd=“fade-in”>Fade In Button</button>
<div class=“sd-animated” style=”–sd-duration: 500ms; –sd-easing: cubic-bezier(.2,.9,.3,1); –sd-animation: sd-fadeIn;”>  Slower fade-in content</div>

Variations and tips

  • Multiple keyframes: define sd-slideUp, sd-slideDown, sd-scaleIn, etc., and set –sd-animation accordingly.
  • Compose multiple animations by allowing a comma-separated list in –sd-animation and providing matching durations/timings.
  • Use prefers-reduced-motion to disable or shorten animations for accessibility:
css
@media (prefers-reduced-motion: reduce) {  .sd-animated { animation-duration: 0.001ms; animation-delay: 0s; }}
  • For consistency, keep fallback defaults in the .sd-animated rule.
  • If using a design system, expose tokens for durations and easings (e.g., –sd-duration-sm, –sd-easing-rapid).

When to use

  • Component libraries where many elements share animation styles.
  • Situations requiring runtime overrides (inline styles, theming).
  • When you want concise, declarative control of animation parameters without extra utility classes.

Summary

The pattern ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;” offers a flexible, maintainable way to control animations via CSS variables. Define reusable keyframes, provide sensible defaults, and allow element-level overrides to balance consistency and customization.

Comments

Leave a Reply

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

More posts