title: Direction of rotation in CSS Animation\Transformation
body: <p>I'm trying to understand CSS animations and I'm running into the following issue:</p>
  
  <p>I've got a simple div with animation attached to it in CSS, like below:</p>
  
  <pre><code>&lt;div id="learn"&gt;LEARN&lt;/div&gt;
  
  #learn {
      width: 100px;
      height: 100px;
      background: blue;
      position: relative;
      animation: test1 5s ease-in 2s infinite;
  }
  </code></pre>
  
  <p><strong>Case 1:</strong> </p>
  
  <pre><code>@keyframes test1 {
      0% {
          transform: rotate(179deg);
      }
      100% {
          transform: rotate(357deg);
      }
  }
  </code></pre>
  
  <p><strong>Case 2 (the 0% transform is split into 90+89 deg instead of 179):</strong> </p>
  
  <pre><code>@keyframes test1 {
      0% {
          transform: rotate(90deg) rotate(89deg);
      }
      100% {
          transform: rotate(357deg);
      }
   }
  </code></pre>
  
  <p>Why is the first case rotating clockwise and the second case rotating counter clockwise? </p>