These are custom CSS properties (CSS variables) likely used by a design system or component library to control a simple fade-in animation. Brief breakdown:
- –sd-animation: sd-fadeIn;
- Name of the animation to apply. The component or stylesheet expects this variable to reference a defined @keyframes rule named “sd-fadeIn” (or to map that name to an animation).
- –sd-duration: 250ms;
- Duration of the animation. Typical usage: animation-duration: var(–sd-duration);
- –sd-easing: ease-in;
- Timing function (easing) for the animation. Typical usage: animation-timing-function: var(–sd-easing);
Example of how these variables are applied in CSS:
css
.component {animation-name: var(–sd-animation); animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing); animation-fill-mode: both; /* optional: keep end state /}
/ Example keyframes the name references */@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}Notes and tips:
- Ensure the @keyframes rule matches the name given in –sd-animation.
- You can override these variables at any scope (root, component) to change animation behavior.
- Use animation-fill-mode: both or forwards to retain final state after animation ends.
Leave a Reply