title: Is it possible to combine translateX/translateY and scale in single CSS transition?
body: <p>I have been playing around with looping of CSS transitions (following <a href="https://www.kirupa.com/html5/looping_a_css_transition.htm" rel="nofollow noreferrer">this article</a>).</p>
  
  <p>The transition itself could be divided into 4 (looped) phases:<br />
  <em>shrinked2=>expanded=>expanded2=>shrinked</em><br />
  These states are represented by 4 classes:<br />
  <em>shrinked2</em> - <code>stateOne</code> <br />
  <em>expanded</em> - <code>stateTwo</code> <br />
  <em>expanded2</em> - <code>stateThree</code> <br />
  <em>shrinked2</em> - <code>stateFour</code> <br />
  <br />
  I am, initially, setting the width and height of my element, being transitioned, in percents via id. Then, to trigger transition, I am changing <code>transform: scale</code> via state classes, listed above.
  <br /><br />
  Up to his point it basically works fine for me, here is <a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/1cf98h76/" rel="nofollow noreferrer">demonstration on JSFiddle</a>.
  <br /><br />
  Now, as the next step I would like to center the transitioned element, vertically and horizontally, on the page (and keep it there). I am doing so by adding the following, to the element id:
  <br />
  <code>top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  </code>
  as well as appending each <code>transform:</code>, in the state classes, with <code>translateX(-50%) translateY(-50%)</code>. Now this way the <code>scale</code> is not applied to the element (i.e. size is not changed on transition) - only <code>background</code> property is affected, transition only happens once (i.e. it is not looped anymore), as if <code>transitionend</code> was never fired.
  Here is <a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/1cf98h76/1/" rel="nofollow noreferrer">the result on JSFiddle</a>. Changing of expected property name (in <code>loopTransition</code> function) to <code>background</code>, <a href="https://jsfiddle.net/mfo4qk9dv2ua5iksttbnqx64c/1cf98h76/2/" rel="nofollow noreferrer">has not effect (JSFiddle)</a>.</p>
  
  <p>I am totally aware that there are <a href="https://css-tricks.com/centering-css-complete-guide/" rel="nofollow noreferrer">lots</a> of <a href="https://stackoverflow.com/a/19461564">other</a> ways to center the element. What I would like to understand is:</p>
  
  <ol>
  <li>Is it possible to combine  <code>translateX</code>/<code>translateY</code> and <code>scale</code> in the same CSS transition (if yes, what am I doing wrong?)</li>
  <li>If element centering with <code>top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);</code> is not compatible with transitions in general or <code>scale</code> in particular, what is the recommended method to use?</li>
  </ol>
  
  <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>var the_circle = document.getElementById('circle');
  the_circle.addEventListener("transitionend", loopTransition);
  
  function startTransition() {
      var the_circle = document.getElementById('circle');
      if (the_circle.className === 'stateOne paused') {
          the_circle.style.transitionDuration = 1;
          the_circle.className = 'stateTwo animated';
      } else {
          stopTransition();
      }
  }
  
  function stopTransition() {
      var the_circle = document.getElementById('circle');
      the_circle.style.transitionDuration = "0.5s"
      the_circle.className = "stateOne paused"
  }
  
  function loopTransition(e) {
      var the_circle = document.getElementById('circle');
      if (e.propertyName === "transform") {
          if (the_circle.className.indexOf('paused') !== -1) {
              stopTransition()
          } else {
              if (the_circle.className === "stateTwo animated") {
                  the_circle.style.transitionDuration = "1s";
                  the_circle.className = "stateThree animated";
              } else if (the_circle.className === "stateThree animated") {
                  the_circle.style.transitionDuration = "1s";
                  the_circle.className = "stateFour animated";
              } else if (the_circle.className === "stateFour animated") {
                  the_circle.style.transitionDuration = "1s";
                  the_circle.className = "stateOne animated";
              } else if (the_circle.className === "stateOne animated") {
                  the_circle.style.transitionDuration = "1s";
                  the_circle.className = "stateTwo animated";
              }
          }
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#circle {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      position: absolute;
      width: 10%;
      padding-top: 10%;
      border-radius: 50%;
      transition: all 1s;
  }
  
  .stateOne {
      background: #800080;
      transform: scale(1.0001, 1.0001) translateX(-50%) translateY(-50%);
  }
  
  .stateTwo {
      background: #ffe6ff;
      transform: scale(2, 2) translateX(-50%) translateY(-50%);
  }
  
  .stateThree {
      background: #ffe6ff;
      transform: scale(2.0001, 2.0001) translateX(-50%) translateY(-50%);
  }
  
  .stateFour {
      background: #800080;
      transform: scale(1, 1) translateX(-50%) translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='circle' class="stateOne paused" onclick=startTransition()&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>