@property --loopy-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --loopy-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --loopy-w { 0% { --loopy-w: var(--_loopy-max-w); } 100% { --loopy-w: 0; } }
@keyframes --loopy-h { 0% { --loopy-h: var(--_loopy-max-h); } 100% { --loopy-h: 0; } }

:root {
  --loopy-max-w: 100;
  --loopy-max-h: 300;
  timeline-scope: --loopy-w, --loopy-h;
  animation: --loopy-w linear, --loopy-h linear;
  animation-timeline: --loopy-w, --loopy-h;
  animation-range: entry 100% exit 100%;
  --_loopy-max-w: var(--loopy-max-w, var(--loopy-max, 99));
  --_loopy-max-h: var(--loopy-max-h, var(--loopy-max, 99));
}
.loopy {
  position: absolute;
  visibility: hidden;
  overflow: hidden;
  width: calc(var(--_loopy-max-w) * 1px);
  height: calc(var(--_loopy-max-h) * 1px);
  left: -100100px;
  top: -100100px;
  pointer-events: none;
  font-size: 0!important;
  &::before {
    content: "";
    position: absolute;
    width: calc(mod(var(--loopy-w) + 1, var(--_loopy-max-w) + 1) * 1px);
    height: calc(mod(var(--loopy-h) + 1, var(--_loopy-max-h) + 1) * 1px);
    view-timeline: --loopy-w inline, --loopy-h block;
  }
}

.loopy-debug-on::after {
  white-space: pre;
  counter-reset: api-1-w var(--loopy-w) api-1-h var(--loopy-h);
  content: "look ma, I made a loop:"
    "\0a--loopy-w: " counter(api-1-w) ";\0a--loopy-h: " counter(api-1-h) ";";
}