Now you know CSS animation!

You’ve completed CSS Animation 101! I hope you’ve enjoyed this book.

Before we finish up, let’s explore some resources you might want to bookmark and explore as you go further with CSS animation.

CSS Animation cheatsheet

I’ve prepared a transitions and animations cheat sheet (PDF) that sums up the various properties of each. It is designed to fit onto one A4 page. Enjoy!

Resources to bookmark

It’s good to know how to create our own CSS animations and transitions, but sometimes it’s handy to build on existing platforms. Here are some great tools that we can use to save time and get the result we want quickly.

Animate.css

Animate.css describes itself as “just add water” CSS animations. You can reference the CSS file and add any of the Animate classes to see them come to life. Here’s an example using Animate.css.

Hover.css

A nice alternative to Animate.css, Hover.css is another wide variety of ready to use animations that you can apply to links, buttons, logos or any other HTML element.

Other tools

CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it’s not the right tool for all situations. Sometimes there’s a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.

GSAP

Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There’s a bit of a learning curve but it’s a powerful tool.

Snabbt.js

Snabbt is a powerful and elegant way to create more complex animation using custom timing functions. It generates transform matrices for the browser to animate, resulting in very good performance.

CSS Animate

CSS Animate is a tool for generating keyframe animations. It helps design animations by dragging an object around and uses a handy timeline approach.

Cubic-bezier.com

For when you want to create a feeling of life in your timing, Cubic-bezier.com is my go-to tool. A simple tool that helps sculpt timing functions. Alternately, a similar tool is built into Chrome’s inspector.

Next steps

A question some have asked is “what do we do to progress past the 101 stage?”.

My suggestion would be to look for challenges. Look to sites such as Dribbble.com, or CodePen.io for inspiration. Look for ideas from popular products (I frequently remake Apple designs), movies or TV shows. Wonder, how would I capture that effect on the web? Would CSS be a good way to do it?

I’d also suggest reading some of the posts on CSS Tricks, SaraSoueidan.com, and of course CSSAnimation.rocks.

So, if you don’t want this knowledge to fade, practice. Find reasons to use it, and look for what interests you. If you can make it fun, it’ll be all the easier.