title: CSS 3 Animations. translate3d versus matrix
body: <p>I have been doing projects that have required smooth transitions and animations.  We have recently migrated from using Javascript to CSS animations almost 100% of the time.</p>
  
  <p>I have found using translate3d provides a very smooth nice animation on both mobile and desktop.</p>
  
  <p>My current animating style is like this:</p>
  
  <p><em>CSS:</em></p>
  
  <pre><code>.animation-up{
       transform: translate3d(0, -100%, 0);
   }
  
  .animation-down{
       transform: translate3d(0, 100%, 0);
   }
  
  .animation-left{
       tranform: translate3d(-100%, 0, 0);
   }
  
  .animation-right{
       tranform: translate3d(-100%, 0, 0);
   }
  </code></pre>
  
  <p>Recently, I have begun to look into different frameworks that seem to be getting a lot of buzz.  Two in specific GreenSock (<a href="http://greensock.com/tweenmax" rel="noreferrer">http://greensock.com/tweenmax</a>)  and Famo.us (<a href="http://famo.us" rel="noreferrer">http://famo.us</a>).  Both show awesome frame-rates and amazing performance.</p>
  
  <p>I am noticing they are using a martix transform.</p>
  
  <p><em>Greensock example (using matrix):</em></p>
  
  <pre><code>&lt;div class="box green" style="transform: matrix(1, 0, 0, 1, 0, 100);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><em>Famo.us example (using 3D-matrix):</em></p>
  
  <pre><code>&lt;div class="famous-surface" style="transform-origin: 0% 0% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149, 385, 0, 1);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My Question is... What is the difference between translate3d and matrix?   Is there a huge improvement using matrix over translate3D? Is there another method out there that yields even better results?</p>
  
  <p>I have been happy with translate3D, but want to learn whatever method will give the smoothest best animations and looking for guidance as to what that maybe.  </p>