Breathe life into your application

Give users context

Creates the illusion of speed  

Canvas + WebGL

Canvas + Javascript

CSS

Javascript Libraries and Frameworks

Pros

Animate.css!

use translate() for hardware acceleration

Cons

.myAnimation {
  -moz-animation-name: myAnimation;
  -moz-animation-duration: 2000ms;
  -moz-animation-delay: 0ms;
  -moz-animation-fill-mode: forwards;
  -moz-animation-timing-function: linear;
  -ms-animation-name: myAnimation;
  -ms-animation-duration: 2000ms;
  -ms-animation-delay: 0ms;
  -ms-animation-fill-mode: forwards;
  -ms-animation-timing-function: linear;
  -o-animation-name: myAnimation;
  -o-animation-duration: 2000ms;
  -o-animation-delay: 0ms;
  -o-animation-fill-mode: forwards;
  -o-animation-timing-function: linear;
  -webkit-animation-name: myAnimation;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-name: myAnimation;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

Prefixes...

Cross Browser Implementation differences

Can't perform complex or multilayered operations

Canvas + Javascript = More Complex animations

setInterval(function() {
  // animiate something
}, 1000/60);

setInterval???

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

requestAnimationFrame

Call it once to kick it off, then it recursively calls itself!

transform3d and matrix3d trigger the gpu

Web Graphics Library

Javascript Libraries are optimized to work around the DOM

...how!?