Essential

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

This article explains the CSS-like custom properties shown in the title, how they might be used in modern web projects, and practical patterns for implementing them with CSS and JavaScript. I’ll assume these are custom properties intended to control a small animation system (prefixed with – or used as shorthand), and provide implementation examples and best practices.

What these properties represent

-sd-animation: sd-fadeIn;
A custom shorthand indicating which animation to apply. Here “sd-fadeIn” is the animation name (likely defined elsewhere).
–sd-duration: 0ms;
A CSS custom property setting the animation duration. Value shown is 0ms (instant); typically you’d use values like 300ms, 500ms, or 1s.
–sd-easing: ease-in;
A CSS custom property defining the animation timing function (easing).

Why use custom properties for animation control

Reusable: define animations once and vary timing/easing per component.
Themeable: allow different parts of the UI to override animation speed or easing.
Declarative: keep intent in CSS/HTML rather than hardcoding in JS.

Basic CSS setup

Define keyframes and a mapping from the animation name to actual keyframes using a utility class or data-attribute.

Example keyframes:

css

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

Utility rule using custom properties:

css

[data-sd-animation] {  animation-name: var(–sd-animation-name, none);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;}

You can map the shorthand -sd-animation value to a custom property that holds the real keyframe name:

css

[data-sd-animation=”-sd-animation: sd-fadeIn;”] {  –sd-animation-name: sd-fadeIn;}

(But note: attribute selectors usually match exact attribute values; better patterns follow below.)

Recommended pattern: use data attributes and set CSS variables

HTML:

html

<div class=“anim” data-anim=“sd-fadeIn” style=”–sd-duration: 300ms; –sd-easing: ease-out;”>  Hello</div>

CSS:

css

.anim {  animation-name: var(–sd-animation-name, none);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;}
/* map data-anim values to keyframes */.anim[data-anim=“sd-fadeIn”] { –sd-animation-name: sd-fadeIn; }

JavaScript helper for dynamic control

If you need to trigger animations or set variables programmatically:

function animate(el, name, duration = ‘300ms’, easing = ‘ease’) {  el.dataset.anim = name;  el.style.setProperty(’–sd-duration’, duration);  el.style.setProperty(’–sd-easing’, easing);  // restart animation  el.style.animation = ‘none’;  void el.offsetWidth;  el.style.animation = “;}

Handling zero-duration and accessibility

A duration of 0ms makes changes instant—useful for users preferring reduced motion or for initial state. Detect prefers-reduced-motion and set duration to 0:

css

@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms; }}

Respect user preferences: provide non-animated fallbacks and avoid forcing motion on users.

Variants and composition

Combine transforms, fades, and slides into named keyframes (sd-fadeInUp, sd-scaleIn).
Use CSS custom properties to parameterize distance, opacity start, or delay.

Debugging tips

Ensure keyframe names match the mapped –sd-animation-name.
Use devtools to inspect computed animation-duration and timing-function.
For JavaScript triggers, force layout between removing and re-adding animation to restart.

Example: Complete snippet