astralpacketcore2.sbs

Music

Written by

ge9mHxiUqTAm

in

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

CSS custom properties make animation configuration reusable and easy to update. The declaration -sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in; shows a compact pattern for applying a named animation together with configurable timing. This article explains the pattern, how to implement it, and practical tips.

What this declaration does

  • -sd-animation: sd-fadeIn; — assigns a custom animation name (here “sd-fadeIn”) via a vendor-like custom property. The naming suggests a design-system prefix (sd-) to avoid collisions.
  • –sd-duration: 250ms; — sets the animation duration to 250 milliseconds.
  • –sd-easing: ease-in; — sets the timing function to ease-in.

Together these properties let you control which animation plays and its timing without editing keyframes directly.

Implementing the pattern

  1. Define keyframes for the named animation:
css
@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
  1. Create a utility rule that reads the custom properties and applies them. Use fallback values to ensure sensible defaults:
css
.sd-animated {  animation-name: var(-sd-animation, none);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;  animation-delay: var(–sd-delay, 0ms);  will-change: opacity, transform;}
  1. Apply to elements and override per element as needed:
html
<div class=“sd-animated” style=”-sd-animation: sd-fadeIn; –sd-duration: 250ms; –sd-easing: ease-in;”>  Fade-in content</div>

Variations and extensions

  • Multiple animations: set -sd-animation: sd-fadeIn, sd-slideLeft; and define matching keyframes; control durations with comma-separated values or via additional properties.
  • Direction and distance: use additional custom properties like –sd-translateY: 6px; and reference them inside keyframes via CSS variables (note: variables aren’t directly usable inside keyframe selectors in all browsers—use transform with calc in some cases or create separate keyframes).
  • Delays and iteration: control with –sd-delay, –sd-iteration-count, and –sd-direction.

Browser considerations

  • Custom properties are widely supported in modern browsers; ensure prefixes aren’t necessary.
  • Some older browsers may not support CSS variables inside keyframe definitions consistently.
  • Use sensible fallbacks in your utility rule.

Accessibility tips

  • Respect prefers-reduced-motion: disable or reduce animations when the user has set this preference.
css
@media (prefers-reduced-motion: reduce) {  .sd-animated { animation: none !important; transition: none !important; }}
  • Keep durations short for minimal motion; 200–300ms is often sufficient for UI micro-interactions.

Example: complete CSS

css
@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(var(–sd-translateY, 6px)); }  to   { opacity: 1; transform: translateY(0); }}
.sd-animated {  animation-name: var(-sd-animation, none);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;  animation-delay: var(–sd-delay, 0ms);  will-change: opacity, transform;}
@media (prefers-reduced-motion: reduce) {  .sd-animated { animation: none !important; }}

When to use this approach

  • Design systems seeking consistent, overridable animations.
  • Component libraries where authors want to expose simple hooks for animation timing.
  • Situations requiring per-component customization without adding multiple utility classes.

Summary

Using a pattern like `-sd-animation: sd-fadeIn; –sd-duration:

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

More posts