"CSS @keyframes and animation shorthand work in razor SCSS"

You need a looping visual — a loading spinner, a pulse, a slow rotate — in a razor UI panel, and you are unsure whether s&box's UI CSS supports @keyframes. The tempting fallback is to advance the animation from C# by bumping the panel's BuildHash every frame so it re-renders and you can rotate it a few degrees each tick. That re-renders the whole panel every frame for a purely cosmetic effect.

There is no bug here — CSS @keyframes and the animation: shorthand do work in s&box razor SCSS. The confusion comes from the fact that s&box's UI CSS parser accepts only a subset of standard CSS (many background-image functions and some properties are rejected), so it is reasonable to assume animations might not be supported either. They are.

This is verifiable directly in the install: the menu addon uses keyframe animations heavily, and the canonical loading spinner lives at addons/menu/Code/MenuUI/Components/New/Spinner.razor.scss:

.spinner {
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

Animate in CSS. A spinner is pure SCSS — do not drive it from a BuildHash frame counter, which would re-render the panel every frame just to spin an icon:

.loading-icon {
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Caveat — SCSS is not compiled by dotnet build. The editor/runtime compiles SCSS, not the headless build, so a @keyframes or animation: typo is invisible to a headless build (both stay green) and only surfaces at runtime. When your only verification is a headless build, copy a proven engine recipe verbatim (the Spinner.razor.scss shape above) rather than hand-writing the animation and hoping it parses.

The UI CSS parser implements the animation subset used by the engine's own menu UI, so anything the menu addon relies on — @keyframes blocks and the animation: shorthand — is safe to use. Letting the parser run the animation keeps the panel static (no re-render), which is both simpler and cheaper than a frame-driven counter.