fluxstoragehub3.cfd

Practices

Written by

pw

in

Understanding CSS Custom Properties in Animation: ”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”

This article explains a compact pattern for driving CSS animations using custom properties — specifically the snippet:

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

You can use this pattern to make animation behavior easy to configure, theme, and override across a component library.

What each property does

  • -sd-animation: a namespaced custom property used here as a shorthand to declare which animation keyframes (by name) a component should run. Using a prefix (like -sd-) reduces risk of collisions with other libraries.
  • –sd-duration: controls the total runtime of the animation (250ms in this example).
  • –sd-easing: sets the timing function (e.g., ease-in) to control the acceleration curve.

Why use custom properties for animation

  • Runtime theming: CSS variables can be overridden on parent elements or via themes without editing component CSS.
  • Declarative overrides: Consumers of a component can change duration or easing by setting the variable on the element or a container.
  • Namespacing: A unique prefix prevents accidental interference with global variables.
  • Separation of concerns: Keeps animation selection (which keyframes) separate from animation parameters (duration/easing).

Example implementation

  1. Define keyframes and a mapping class that reads the custom properties:
css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/* Fallback defaults /:root {  –sd-duration: 250ms;  –sd-easing: ease-in;}
/ Component uses the variables */.component {  animation-name: var(-sd-animation, none);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}
  1. Usage examples and overrides:
html
<div class=“component” style=”-sd-animation: sd-fadeIn;”>  Content</div>
<div class=“component” style=”-sd-animation: sd-fadeIn; –sd-duration: 120ms; –sd-easing: linear;”>  Faster content</div>
<section style=”–sd-duration: 400ms;”>  <div class=“component” style=”-sd-animation: sd-fadeIn;”>    Slower inside section  </div></section>

Best practices

  • Use a clear prefix for custom properties to avoid collisions.
  • Provide sensible defaults in :root or a theme layer.
  • Validate that animation-name fallback is handled (e.g., var(-sd-animation, none)).
  • Consider accessibility: respect prefers-reduced-motion by disabling or shortening animations:
css
@media (prefers-reduced-motion: reduce) {  .component { animation: none !important; }}
  • Keep animations short and purposeful to avoid distraction.

When not to use this pattern

  • If animations are tightly coupled to component internals and shouldn’t be changed by consumers.
  • When you need complex choreography that CSS variables alone can’t express — use JS-driven animations or Web Animations API.

Summary

Using a small set of namespaced custom properties like -sd-animation, –sd-duration, and –sd-easing gives you a flexible, themeable way to control CSS animations. It enables simple overrides, safer integration across libraries, and cleaner separation between “which animation” and “how it runs.”

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

More posts