py-1 [&>p]:inline

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

This article explains the CSS custom properties shown in the title, how they control animations, and how to use them effectively in modern web projects.

What these properties do

• –sd-animation: sd-fadeIn; — assigns a custom animation name (here, “sd-fadeIn”) which should correspond to a keyframes rule or an animation definition in your stylesheet or framework.
• –sd-duration: 250ms; — sets the animation duration to 250 milliseconds.
• –sd-easing: ease-in; — sets the timing function to ease-in, making the animation start slowly and speed up.

These are CSS custom properties (variables). They let you centralize animation settings and override them in specific contexts (components, themes, or states) without rewriting keyframes.

Example implementation

1. Define keyframes and a default animation that reads the custom properties:

@keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/* Utility that applies the variables */.sd-animated {  animation-name: var(–sd-animation, sd-fadeIn);  animation-duration: var(–sd-duration, 250ms);  animation-timing-function: var(–sd-easing, ease-in);  animation-fill-mode: both;}

2. Use and override in markup:

<div class=“sd-animated”>Default fade-in</div>
<div class=“sd-animated” style=”–sd-duration: 500ms; –sd-easing: cubic-bezier(.2,.8,.2,1);”>  Slower, custom easing</div>

Tips for practical use

• Use descriptive variable names (as shown) and provide sensible defaults in the component stylesheet.
• Combine with prefers-reduced-motion to respect accessibility:

@media (prefers-reduced-motion: reduce) {  .sd-animated { animation: none !important; }}

• For complex component libraries, expose these variables in a theme root so consumers can customize timing globally.
• Keep durations short for micro-interactions (150–300ms); use longer durations (400–700ms) for larger, attention-grabbing transitions.
• Match easing to intent: ease-in for entrances, ease-out for exits, and custom cubic-beziers for natural motion.

Troubleshooting

• If animation doesn’t run, confirm the keyframes name matches the variable value.
• Inline styles can override CSS variables—use that to provide per-instance tweaks.
• Ensure the element has properties that animate (opacity, transform, etc.); some properties like display cannot be animated.

Quick reference

• Duration: 150–300ms for micro-interactions; 400–700ms for prominent transitions.
• Easing: ease-in, ease-out, ease-in-out, linear, or cubic-bezier for fine control.
• Accessibility: honor prefers-reduced-motion.

This pattern keeps animation behavior modular, themable, and easy to override while staying accessible and maintainable.