dataprismcore5.sbs

for

Written by

pw

in

These are CSS custom properties (variables) used to control an animation. Breakdown:

  • -sd-animation: sd-fadeIn;

    • Specifies the animation name (here a custom animation called “sd-fadeIn”).
  • –sd-duration: 250ms;

    • Sets the animation duration to 250 milliseconds.
  • –sd-easing: ease-in;

    • Sets the timing function to “ease-in” (starts slowly, then speeds up).

How they’re typically used in CSS:

  • Define the animation keyframes (sd-fadeIn) elsewhere, e.g. fading opacity and/or translating position.
  • Apply the variables where animation properties are read, for example: 
    .element {animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);}

Notes:

  • Variable names must match exactly (leading dashes matter).
  • You can override these vars on

Comments

Leave a Reply

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

More posts