dataprismcore2.sbs

the

Written by

pw

in

These are CSS custom properties (CSS variables) used to control a component’s animation. Explanation:

  • -sd-animation: sd-fadeIn;
    • Assigns a named animation type (likely defined elsewhere) — here a “fade in” animation variant.
  • –sd-duration: 0ms;
    • Duration of the animation; 0ms means no visible animation (instant).
  • –sd-easing: ease-in;
    • Timing function controlling acceleration; “ease-in” starts slow then speeds up.

How they work together

  • A component’s stylesheet or JS reads these variables and applies an animation, e.g.:
    • animation-name: var(-sd-animation);
    • animation-duration: var(–sd-duration);
    • animation-timing-function: var(–sd-easing);
  • With duration 0ms the element will jump to the final state immediately; easing has no visible effect.

Typical usage

  • Override defaults on an element: style=“–sd-duration:300ms; –sd-easing:cubic-bezier(0.2,0.8,0.2,1); -sd-animation: sd-slideUp;”
  • Define default values in CSS:
    • :root { –sd-duration: 200ms; –sd-easing: ease; -sd-animation: sd-fadeIn; }

Notes

  • The leading single hyphen (-sd-animation) is a valid custom property name (CSS variables normally start with – but any property can be used by frameworks; for consistency prefer –sd-…).
  • Ensure the referenced animation keyframes (e.g., @keyframes sd-fadeIn) exist or a framework provides them.

Comments

Leave a Reply

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

More posts