Velocity.js is a free, lightweight library that you should be using - developer Neal O'Grady gets you started.

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.

The following article covers a large swath of SVG animation tips and resources for web designers. You’ll learn how SVG images are created and why they’re fantastic for use on the web. You’ll also find a collection of SVG animation tutorials and open source code to help new designers come to terms with building unique SVG animations from scratch.

You don’t need JavaScript to create impressive 3D projects in the web browser. In this post I will show how to create and animate a Portal-inspired scene using only CSS.

Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Spheres

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.

Physics-based animations and interactions are becoming more common in UI. This page goes through some basic physical models and the kinds of interactions and animations that can be constructed from them.