Animation Toolkit
There are two types to create motion on the web — CSS and JavaScript. CSS3 is a powerful toolkit with features dedicated to performing a broad range of effects from basic transitions to 3D animations. Previously only possible with Javascript or Flash.
CSS3 Transition can be used to created content transitions, animate complex navigation, reveal off-screen menus and chain multiple effects for an element. It can enhance simple actions like showing and hiding content visually richer. It offers better control through its properties including speed, direction, acceleration, and iteration-count.
Examples: http://goo.gl/Jfmw0h http://goo.gl/I52ILS http://goo.gl/d3azI
CSS3 Transforms is quite powerful with two transformation types — 2D & 3D. With 2D, you can stretch, shrink, move or pull two corners of the element to distort it. these are represented by scale, translate, rotate and skew. 3D gives you these same options but you can do them in three dimensions. 3d transform can be used to create something as simple as cool-looking 3D buttons, spinning an element or converting flat web content into a dynamic 3D objects. It also serves as foundation for other advanced animations effects. For example, combine CSS3 Transform with other techniques to flip a cubic menu section to show back side information, or flip a video around in 3D space to reveal different content, all while the video is still playing.
examples: http://goo.gl/XelHIl http://goo.gl/aBVkxo http://goo.gl/QHqLXc http://goo.gl/PZj3w9
CSS3 Keyframes takes your animation to the next level. It allows you to trigger other actions in a timeline where at each point you execute a different animation effect, which can be repeated, paused, resumed, delayed and even reversed.
If the idea is a bit advanced or requires more control over the animation (like callback function to trigger an animation at specific point), then JavaScript is required to perform such complex animations. It has two major features exclusive for animation: Web Animation API and requestAnimationFrame. Web Animation API is the new kid on the bloc, which is still in consideration in W3C’s spec draft. It lets you build fluid animation frame-by-frame, along with other features like motion path, playback control, respond to users’ inputs, and the ability to synchronize different action sequences.
Animation frameworks like GSAP and Velocity.JS, which provides faster performance than CSS based animations, memory efficient and has cross-browser support including IE and Android 2.3. GSAP is fast, feature-ric hand supports motion tweening, sequence animations, animating HTML5 Canvas and SVG features. Velocity.JS is a lightweight library, focused on DOM based animations and includes features to improve animation workflow.
