p]:inline” data-streamdown=”list-item”>vaspGUI: A Beginner’s Guide to Visualizing VASP Workflows

These look like CSS custom properties (variables) used to control a small animation system. Explanation of each:

• –sd-animation: sd-fadeIn;
  • Specifies the animation name or preset to apply. Here “sd-fadeIn” likely denotes a fade-in animation defined elsewhere (keyframes or a preset handler).
• –sd-duration: 0ms;
  • Duration of the animation. 0ms means it runs instantly (no visible animation). Use values like 200ms, 500ms, or 1s for visible transitions.
• –sd-easing: ease-in;
  • Timing function controlling acceleration. “ease-in” makes the animation start slowly and speed up. Other options: linear, ease-out, ease-in-out, cubic-bezier(…).

How they are typically used:

• Defined on an element and consumed by CSS rules or JavaScript that maps the custom properties to actual animation properties (animation-name, animation-duration, animation-timing-function) or to a framework’s animation engine.

Example CSS pattern:

:root {–sd-animation: sd-fadeIn;  –sd-duration: 300ms;  –sd-easing: ease-in-out;}
.element {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}@keyframes sd-fadeIn {  from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

Practical notes:

• With –sd-duration: 0ms the element will jump to the final state immediately; set a nonzero duration to see the effect.
• Ensure the keyframes or animation definition named by –sd-animation exists.