<article>
  <p class="note">⚠️ Chrome support only for now.</p>
  <p>Custom properties are strings by default. So, if we have a variable and want to animate it as a numeric value, we need to interpolate it by defining the variable as a CSS custom property, then setting the syntax to a number.</p>
  <p>
  <pre><code>@property --hue {
  syntax: "&lt;number>";
  initial-value: 0;
  inherits: true;
}</code></pre>
  </p>

  <p>Now, we have a variable that's a number that defaults to <code>0</code> and can be used in an animation.</p>
  <p>
  <pre><code>@keyframes rainbow {
  from { --hue: 0; }
  to { --hue: 360; }
}

body {
  animation: rainbow 5s linear infinite;
  background-color: hsl(var(--hue) 50% 50%);
}</code></pre>
  </p>
</article>

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

@keyframes rainbow {
  from {
    --hue: 0;
  }
  to {
    --hue: 360;
  }
}

body {
  --hue: 0;
  animation: rainbow 10s linear infinite;
  background-color: hsl(var(--hue) 50% 50%);
  display: grid;
  height: 100vh;
  place-items: center;
  width: 100vw;
}

article {
  background: #fff;
  border-radius: 16px;
  max-width: 55ch;
  padding: 1.5rem;
}

code {
  background: #eaeaea;
  padding-inline: 2px;
}

pre code {
  border-radius: 8px;
  display: block;
  font-size: 90%;
  padding: 0.75rem;
}