p]:inline” data-streamdown=”list-item”>Troubleshooting Common Shubus Viewer Issues — Quick Fixes

Those look like CSS custom properties (CSS variables) used to control an animation system. Here’s a concise breakdown:

• -sd-animation: sd-fadeIn;
  • Purpose: Selects the animation to apply. sd-fadeIn is likely a named keyframe animation or a preset defined elsewhere in the stylesheet or JS.
  • Usage: Components/readers of these variables (CSS rules or scripts) will use the value to choose animation keyframes or apply conditional styles.
• –sd-duration: 0ms;
  • Purpose: Defines the animation duration. 0ms means the animation runs instantly (no visible transition).
  • Effect: With 0ms, transitions or keyframe effects will not animate; they’d jump to the end state immediately.
• –sd-easing: ease-in;
  • Purpose: Sets the timing function (easing) for the animation. ease-in accelerates from slow to fast.
  • Note: Easing has no visible effect if duration is 0ms.

How they are typically used in CSS:

• Declared on an element or root:
  .example {–sd-animation: sd-fadeIn;  –sd-duration: 300ms;  –sd-easing: ease-in;}

• Consumed by animation rules (example patterns):
  .animated {  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(8px); }  to   { opacity: 1; transform: translateY(0); }}

Practical notes:

• Change –sd-duration from 0ms to a positive value (e.g., 200ms) to see the animation.
• Ensure the named animation (sd-fadeIn) is defined with @keyframes or handled by JavaScript.
• Use animation-fill-mode: both or forwards if you want the end state to persist after the animation.