title: Why can't I animate custom properties (aka CSS variables)?
body: <p>See this animation:  </p>
  
  <ul>
  <li>The golden div has an animation where a custom property is animated<br>
  (<code>@keyframes roll-o-1</code> animates <code>--o</code>).<br>
  This animates in steps.   </li>
  <li>The silver div has an animation where a <em>normal</em> property is animated<br>
  (<code>@keyframes roll-o-2</code> animates <code>left</code>).<br>
  This animates continuously.  </li>
  </ul>
  
  <p><strong>Why doesn't the golden div animate smoothly?</strong><br>
  <strong>Is there any workaround which also uses variables?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#one {
    width: 50px;
    height: 50px;
    background-color: gold;
    --o: 0;
    animation: roll-o-1 2s infinite alternate ease-in-out both;
    position: relative;
    left: calc(var(--o) * 1px);
  }
  
  @keyframes roll-o-1 {
    0% {
      --o: 0;
    }
    50% {
      --o: 50;
    }
    100% {
      --o: 100;
    }
  }
  
  #two {
    width: 50px;
    height: 50px;
    background-color: silver;
    --o: 0;
    animation: roll-o-2 2s infinite alternate ease-in-out both;
    position: relative;
  }
  
  @keyframes roll-o-2 {
    0% {
      left: 0px;
    }
    50% {
      left: 50px;
    }
    100% {
      left: 100px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;div id="two"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>