Learn CSS Animation for your web projects

CSS Animations Pocket Guide

CSS has been around for a number years. The usual method one might benefit from using CSS is to design the look of a website. This is typically done through the use of a CSS stylesheet.

With the stylesheet you can dictate just about everything with regards to the look of your website.

CSS animation?

A lot of people don't know about CSS animation. Even I thought the majority of animation was done with a javascript code like jQuery. But it appears as though it is not overly difficult to add animation through the use of CSS.

For some CSS Animation Examples visit http://codepen.io/collection/EIqBg/

What to learn CSS from an Expert?

Well, one of my Twitter friend has written a publication on CSS Animations. Her name is Val Head and her book is called The CSS Animations Pocket Guide. And for the time being you can get it for just about any price by visiting her site. Val's offering a pay as you like system.

But before you do that here's a run down of what's in the book.

Part 1: CSS Animation Basics

An explanation of the basic building blocks for creating animations with CSS.

Part 2: Exploring animation properties

Slightly more advanced and highly useful properties like animation-direction, animation-delay and animation-fill-mode give you more fine-tuned control over your animations. This section shows how and when to use these properties.

Part 3: Understanding Easing

Where an object goes is important, but how it gets there is even more important. This section covers the details of the easing keywords and custom bezier functions.

Part 4: Common Animation Tasks

This section puts our CSS animation knowledge so far into practice, going into the details behind four example animations: an infinitely looping animation, animating with steps, using animation-play-state and applying multiple animations to one object.

Part 5: Performance and browser support

This section looks at the practical aspects of using CSS animations in production work. It covers how to determine browser support and what to consider when choosing your approach to fallbacks.


It is a well written book, giving you concise instructions on how to do you own CSS animations. After you finish this book you should be able to make all sorts of object move on your web page.

Leave a Reply

Your email address will not be published. Required fields are marked *