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

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

This article explains the CSS-like custom properties shown in the title and shows how to use them to create a simple, reusable fade-in animation pattern for web elements.

What these properties mean

• -sd-animation: the name of a custom animation utility (here sd-fadeIn) — used as a semantic hook, not a native CSS property.
• –sd-duration: the animation duration in milliseconds (250ms).
• –sd-easing: the timing function controlling animation acceleration (ease-in).

How the pattern works

The pattern treats the three lines as custom properties that can be consumed by a component’s stylesheet or a small CSS utility. The component reads the animation name, duration, and easing, then applies an appropriate keyframes rule and transition so the element fades in smoothly.

Example CSS implementation

:root {–sd-duration: 250ms;  –sd-easing: ease-in;}
/* Semantic utility that maps -sd-animation values to keyframes /.sd-fadeIn {  animation-name: sd-fadeIn-keyframes;  animation-duration: var(–sd-duration, 250ms);  animation-timing-function: var(–sd-easing, ease-in);  animation-fill-mode: both;}
@keyframes sd-fadeIn-keyframes {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}
/ Allow applying the utility via the custom -sd-animation attribute */[data-sd-animation=“sd-fadeIn”] {  animation-name: sd-fadeIn-keyframes;  animation-duration: var(–sd-duration, 250ms);  animation-timing-function: var(–sd-easing, ease-in);  animation-fill-mode: both;}

Usage in HTML

<div data-sd-animation=“sd-fadeIn” style=”–sd-duration: 250ms; –sd-easing: ease-in;”>  Content that fades in</div>

Notes and best practices

• Use sensible defaults via CSS variables so elements still animate if inline variables are omitted.
• Keep durations short (150–400ms) for micro-interactions; longer for larger transitions.
• Prefer hardware-accelerated transforms (translate, scale) rather than animating layout properties to maintain performance.
• Provide reduced-motion alternatives by checking the prefers-reduced-motion media query.

Reduced motion example

@media (prefers-reduced-motion: reduce) {  .sd-fadeIn,  [data-sd-animation=“sd-fadeIn”] {    animation: none;    opacity: 1;    transform: none;  }}

This approach turns the title’s three lines into a practical, accessible animation utility you can apply across components.