ultranodecluster1.cyou

Improve

Written by

ge9mHxiUqTAm

in

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

This article explains the CSS-style custom properties shown in the title and how to use them to create a simple fade-in animation pattern.

What the properties mean

  • -sd-animation: custom shorthand name for an animation preset (here “sd-fadeIn”).
  • –sd-duration: duration of the animation (250ms).
  • –sd-easing: timing function for the animation (“ease-in”).

CSS example

css
:root {–sd-fadeIn-from-opacity: 0;  –sd-fadeIn-to-opacity: 1;}
.fade-in {  /* Preset values from title */  –sd-duration: 250ms;  –sd-easing: ease-in;
  animation-name: sd-fadeIn;  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}
@keyframes sd-fadeIn {  from { opacity: var(–sd-fadeIn-from-opacity, 0); transform: translateY(6px); }  to   { opacity: var(–sd-fadeIn-to-opacity, 1); transform: translateY(0); }}

Usage

  • Add the class “fade-in” to any element to apply the 250ms ease-in fade.
  • Override duration or easing per-element by redefining the custom properties inline or in a more specific selector:
html
<div class=“fade-in” style=”–sd-duration: 500ms; –sd-easing: cubic-bezier(.2,.8,.2,1);”>  Hello</div>

Tips

  • Use longer durations for larger elements to make motion feel natural.
  • Combine opacity with slight translateY for a smoother entrance.
  • Prefer CSS variables to keep animations consistent and easy to tweak.

Short demo (HTML)

html
<button class=“fade-in”>Click me</button>

This gives a concise, reusable pattern for the CSS custom properties shown in the title.

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

More posts