title: Possible to use translate twice on same element?
body: <p>I used Javascript to translate via transform a circle from the center of the canvas to the upper left. What I want to do next is call a function that picks random coordinates within the canvas and sends them to translate, so its position can be shifted. Unfortunately this is not working.</p>
  
  <p>Can you only call translate once on an element within CSS? This is the conclusion I'm coming to but I haven't been able to find information in the docs say this type of behavior <em>isn't</em> allowed.</p>
  
  <p>The heart of the matter:</p>
  
  <pre><code>function change_level() {
    var level = document.getElementById("level");
    level.parentNode.removeChild(level);
    var ball = document.getElementById("init_pos");
    ball.style.backgroundColor = "orange";
    ball.style.borderRadius = "25px";
    ball.style.transform = "translate(-600%, -647%)";
    setTimeout(ball_movement(ball), 3000);
    ball.style.transition = "background-color 2s ease-in, transform 3s ease";
  
  }
  
  function ball_movement(ball) {
    var movements = 5;
    var x;
    var y;
    for (var i = 0; i &lt; movements; i++) {
      x = getRandomArbitrary(-800, 800);
      y = getRandomArbitrary(-800, 800);
      ball.style.transform = "translate("+x+", "+y+")";
      ball.style.transition = "transform 3s ease";
      console.log(x);
    }
  }
  </code></pre>
  
  <p>Posted my code on jsfiddle, though my calculations are bigger than the campus in jsfiddle and so don't work properly.</p>
  
  <p><a href="https://jsfiddle.net/2c5gwbcd/" rel="nofollow">https://jsfiddle.net/2c5gwbcd/</a></p>