title: SVG follows pointer animation stutter
body: <p>The transition of the SVG that follows my pointer stutters when an SVG element is animated (translate, scale or rotate).</p>
  <p>I update the <code>translate</code> properties of my SVG on <code>pointermove</code> event, and rely on CSS transition to make it smooth.</p>
  <p>It works until I add a transform animation on one of the SVG element.</p>
  <p>Something interesting is that when the window is not focused the transition remain smooth.</p>
  <p>If I apply the transformation on the SVG container it remains smooth, but I need an animation on an SVG element.</p>
  <p>Is there any secret property or technique to keep it smooth? </p>
  <p>Thank you!</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-js lang-js prettyprint-override"><code>const onPointerMove = (e) =&gt; {
    svg.style.translate = `${e.x}px ${e.y}px`
  }
  
  addEventListener('pointermove', onPointerMove)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width: 100px;
    height: 100px;
    transition: translate 0.6s ease-out;
  }
  
  rect {
    animation: reshape 1s alternate infinite;
  }
  
  @keyframes reshape {
    to {
      scale: 0.5;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewport="0 0 100 100" id="svg"&gt;
    &lt;rect width="100" height="100" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>