:root {
  --scale: 3;
}

@property --scale {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.demo {
  display: grid;
  place-items: center;
}

.thing {
  --scale: 1;
  animation: scale 2s linear alternate infinite;
  background: #f8a100;
  display: grid;
  height: 100px;
  place-items: center;
  transform: scale(var(--scale));
  width: 100px;
}

@keyframes scale {
  from {
    --scale: 0;
  }
  to {
    --scale: 3;
  }
}

.note {
  display: none;
}

@supports not (background: paint(howdy)) {
  .note {
    border: 1px solid #eaeaea;
    display: block;
    padding: 0.75rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thing {
    animation: 0;
  }
}