title: Confusion with a CSS transform having multiple translate properties
body: <p>In <a href="http://codepen.io/Zeaklous/pen/GwBJa" rel="nofollow">the following demo</a> (WebKit only), I do not understand why there are double translates and rotates for one transform property in CSS part.</p>
  
  <pre><code>transform: translate(100px, 100px) rotate(45deg) translate(-100px, -100px) rotate(-45deg);
  </code></pre>
  
  <p>This is really a weird example. And why does the circle move like that?</p>
  
  <p>Full demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// NOTE: The change to red signifies the start of 
  // the animation
  
  
  // Allows elements to be accessed in a clean way
  var circle = document.getElementById('circle'), 
      button = document.getElementById('button');
  
      // Gets element to show current percentage
  var result = document.getElementById('result'),
      // Current position of circle around its path
      // in percent in reference to the original
      totalCurrentPercent = 0,
      // Percent of circle around its path in
      // percent in reference to the latest origin
      currentPercent = 0;
  
  // Updates the percent change from the latest origin
  var showPercent = window.setInterval(function() {
    if(currentPercent &lt; 100)
    {
      currentPercent += 1;
    }
    else {
      currentPercent = 0;
    }
    result.innerHTML = currentPercent;
  }, 39); // Runs at a rate based on the animation's
          // duration (milliseconds / 100)
  
  
  
  // Checks to see if the specified rule is within 
  // any of the stylesheets found in the document;
  // returns the animation object if so
  function findKeyframesRule(rule) {
      var ss = document.styleSheets;
      for (var i = 0; i &lt; ss.length; ++i) {
          for (var j = 0; j &lt; ss[i].cssRules.length; ++j) {
              if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE &amp;&amp; ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }
          }
      }
      return null;
  }
  
  // Replaces the animation based on the percent
  // when activated and other hard coded 
  // specifications
  function change(anim) {
    // Obtains the animation object of the specified
    // animation
    var keyframes = findKeyframesRule(anim),
        length = keyframes.cssRules.length;
    
    // Makes an array of the current percent values
    // in the animation
    var keyframeString = [];  
    for(var i = 0; i &lt; length; i ++)
    {
      keyframeString.push(keyframes[i].keyText);
    }
    
      
    // Removes all the % values from the array so
    // the getClosest function can perform calculations
    var keys = keyframeString.map(function(str) {
      return str.replace('%', '');
    });
    
    // Updates the current position of the circle to
    // be used in the calculations
    totalCurrentPercent += currentPercent;
    if(totalCurrentPercent &gt; 100)
    {
      totalCurrentPercent -= 100;
    }
    // Self explanatory variables if you read the
    // description of getClosest
    var closest = getClosest(keys);
    
    var position = keys.indexOf(closest), 
        firstPercent = keys[position];
    
    // Removes the current rules of the specified 
    // animation
    for(var i = 0, j = keyframeString.length; i &lt; j; i ++)
    {
      keyframes.deleteRule(keyframeString[i]);
    }
    
    // Turns the percent when activated into the
    // corresponding degree of a circle
    var multiplier = firstPercent * 3.6;
    
    // Essentially this creates the rules to set a new 
    // origin for the path based on the approximated
    // percent of the animation when activated and
    // increases the diameter of the new circular path  
    keyframes.insertRule("0% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 0) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 0) + "deg); background-color:red; }");
    keyframes.insertRule("13% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 45) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 45) + "deg); }");
    keyframes.insertRule("25% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 90) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 90) + "deg); }");
    keyframes.insertRule("38% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 135) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 135) + "deg); }");
    keyframes.insertRule("50% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 180) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 180) + "deg); }");
    keyframes.insertRule("63% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 225) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 225) + "deg); }");
    keyframes.insertRule("75% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 270) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 270) + "deg); }");
    keyframes.insertRule("88% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 315) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 315) + "deg); }");
    keyframes.insertRule("100% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 360) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 360) + "deg); }");
    
    // Shows the circle again
    circle.style.display = "inherit";
    // Sets the animation to the newly specified rules 
    circle.style.webkitAnimationName = anim; 
    
    // Resets the approximate animation percent counter
    window.clearInterval(showPercent);
    currentPercent = 0;
    showPercent = self.setInterval(function() {
      if(currentPercent &lt; 100)
      {
        currentPercent += 1;
      }
      else {
        currentPercent = 0;
      }
      result.innerHTML = currentPercent;
    }, 39); 
  }
  
  // Attatches the change function to the button's
  // onclick function
  button.onclick = function() {
    // Removes the animation so a new one can be set
    circle.style.webkitAnimationName = "none";
    // Temporarily hides the circle
    circle.style.display = "none";
    // Initializes change function
    setTimeout(function () { 
        change("rotate"); 
    }, 0);
  }
  
  // Gets the animation's closest % value based on
  // the approximated % found below
  function getClosest(keyframe) {
    var curr = keyframe[0];
    var diff = Math.abs (totalCurrentPercent - curr);
    for (var val = 0, j = keyframe.length; val &lt; j; val++) {
      var newdiff = Math.abs(totalCurrentPercent - keyframe[val]);
      if (newdiff &lt; diff) {
        diff = newdiff;
        curr = keyframe[val];
       }
    }
    return curr;
  }
  
  
  // Check out http://zachsaucier.com/ for more of my projects</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes rotate {
      0% {
          -webkit-transform:translate(100px, 100px) rotate(0deg) translate(-100px, -100px) rotate(0deg);
          background-color:red;
      }  
    13% {
          -webkit-transform:translate(100px, 100px) rotate(45deg) translate(-100px, -100px) rotate(-45deg);
    }
    25% {
        -webkit-transform:translate(100px, 100px) rotate(90deg) translate(-100px, -100px) rotate(-90deg);
    }
    38% {
        -webkit-transform:translate(100px, 100px) rotate(135deg) translate(-100px, -100px) rotate(0deg);
    }
    50% {
        -webkit-transform:translate(100px, 100px) rotate(180deg) translate(-100px, -100px) rotate(-180deg);
    }
    63% {
        -webkit-transform:translate(100px, 100px) rotate(225deg) translate(-100px, -100px) rotate(225deg);
    }
    75% {
        -webkit-transform:translate(100px, 100px) rotate(270deg) translate(-100px, -100px) rotate(-270deg);
    }
    88% {
        -webkit-transform:translate(100px, 100px) rotate(315deg) translate(-100px, -100px) rotate(315deg);
    }
      100% {
          -webkit-transform:translate(100px, 100px) rotate(360deg) translate(-100px, -100px) rotate(-360deg);
      }
  }
  #circle {
      height: 50px;
      width: 50px;
      border-radius:25px;
      background-color: teal;
      -webkit-animation-duration: 4s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name:"rotate";
      -webkit-animation-iteration-count: infinite;
      position:absolute;
      left:30%;
      top:20%; 
  }
  #button {
    width:130px;
    background:teal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="circle"&gt;&lt;/div&gt;
  &lt;div id='button'&gt;ChangeAnimation&lt;/div&gt;
  &lt;div id='result'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>