title: Javascript Animation Issues - Transition not working
body: <p>I'm trying to animate a SVG on the page using only JavaScript (NO CSS). However, the transition isn't applying the delay</p>
  
  <pre><code>dot.style.transition = "all 0.4s ease";
  dot.style.transform = "translateY(-5px)";
  </code></pre>
  
  <p>this results in its translateY being applied, but not transitioned. Why is this and how can i avoid it?</p>
  
  <p><a href="https://jsfiddle.net/0nmha9uf/" rel="nofollow noreferrer">https://jsfiddle.net/0nmha9uf/</a>
  Svg seems completley bugged.</p>
  
  <p>EDIT: fixed typo on 0.4s - this was not the issue.</p>
  
  <p>EDIT 3: Solved, leveraging requestAnimationFrame
  <a href="https://jsfiddle.net/ke5fnp9h/3/" rel="nofollow noreferrer">https://jsfiddle.net/ke5fnp9h/3/</a></p>