What is animation?

Where we've been and why the state of animation on the web has evolved.

Native CSS3 and JavaScript APIs = Good performance, native to modern browsers

• CSS3 Transforms
  Modify 2D and 3D coordinate space with properties such as scale, translate (move), rotate, skew, perspective, etc. Not inherently animated, but commonly used within animation operations.
  https://developer.mozilla.org/en-US/docs/Web/CSS/transform
  http://caniuse.com/#feat=transforms2d
  http://caniuse.com/#feat=transforms3d
• CSS3 Transitions
  When CSS property changes are applicable, as with :hover or using JS to dynamically add/remove CSS classes, allows control over the timing of the transition.
  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
  http://caniuse.com/#feat=css-transitions
• CSS3 @keyframes Animation
  Define animation properties including looping and iterations on a normal CSS selector, specifying a named @keyframes rule that defines CSS properties for the beginning and end points. Useful in conjunction with JS triggering.
  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
  http://caniuse.com/#feat=css-animation
  http://24ways.org/2012/flashless-animation (example of flipping through image sprite frames with steps property)
• Animating SVG
  Scalable Vector Graphics provide a good target for animation via CSS and/or JavaScript.
  http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
  http://snapsvg.io/ A JS library described as "jQuery for SVG", from the creator ofRaphael.JS.
  http://caniuse.com/#feat=svg http://caniuse.com/#feat=svg-html
• Web Animation API
  JavaScript API providing native CSS3-like performance and enabling more powerful animation techniques such as synchronizing multiple animations, nesting, sequencing, motion paths, etc.
  http://codepen.io/rachelnabors/pen/zxYexJ/
  http://caniuse.com/#feat=web-animation
  https://w3c.github.io/web-animations/
• WebGL API
  Javascript API for rendering 3D and 2D graphics. Beyond browser support, it does require hardware GPU support.
  http://en.wikipedia.org/wiki/WebGL
  http://caniuse.com/#feat=webgl
  http://davidwalsh.name/webgl-demo

JavaScript Libraries = If you can code, you can animate; using simple methods and superpowered frameworks.

• jQuery .animate
  Basic tweening of CSS properties.
  http://api.jquery.com/animate
• Velocity.js
  A lightweight replacement for jQuery .animate with better performance.
  http://julian.com/research/velocity/
• GSAP (Greensock Animation Platform)
  A robust, high performance animation library, with lightweight components that can be used individually, like TweenLite.
  http://greensock.com/
• Scroll-position aka Parallax libraries:
  • Skrollr
    Minimal JavaScript skills needed, works via CSS properties defined in keyframes in HTML5 data attributes or external CSS.
    http://prinzhorn.github.io/skrollr/
  • ScrollMagic
    Powered by GSAP, uses GSAP JS syntax. More fully featured for complex scene creation and interactivity.
    http://janpaepke.github.io/ScrollMagic/
  • Comparison: https://ihatetomatoes.net/skrollr-vs-scrollmagic/
• D3.js
  A data visualization library, offering many interesting possibilities through its interactive and animation methods.
  http://d3js.org/