A Pocket Guide to CSS Animations

Introduction

This book is designed to be a jump-start for you to familiarise yourself with CSS animations and start using them to bring your web-based interfaces and artwork to life. While the W3C’s CSS animations spec is still technically in the works, there’s plenty of it that we can use today.

To me, one of the most exciting things about CSS animations is how easily we can add them to our work using tools we already know. If you’re well-versed in HTML and CSS, there’s no new language to learn or plug-in to shoehorn in to add motion to your work. You’ve already got the skills and tools you need to jump right in. That’s a very big plus! Whether you want to add just little bit of motion for compelling design details, or go all out with tons of animation, the power is already in your hands.

CSS transitions, JavaScript and SVG are also viable options for adding motion on the web and are all certainly worth checking out, but we won’t be covering them in this book. We’ll stick to things included in the CSS animations spec.

My aim with this short book is to give you a taste of what’s possible and provide a strong foundation on which to start experimenting and creating. This book will give you enough to get started with CSS animations, enough to be dangerous…and creative!

A quick word on vendor prefixes

You can’t get very far with CSS animations before running into the need for vendor prefixes, so let’s take a minute to cover how I’ll be using them in this book.

As I write this, the most recent versions of Firefox, Opera and IE support CSS animations without prefixes – yay! Other browsers, however, including slightly older versions of these browsers, still require vendor prefixes for animation support. For that reason, I highly recommend using prefixes for all your animation properties in any sort of production project. In fact, let’s just say they’re required.

Of course, while you’re experimenting or just trying things out locally, feel free to use whichever prefix your browser of choice requires. Just add in your prefixes for the production version.

To keep things easier to read, I’ll be using the unprefixed version of animation properties for the code snippets presented in this book. The accompanying code examples contain vendor prefixes, and some of the examples are also available on codepen.io for you to edit and experiment with on the fly as well.

So, let’s