5 great CSS animation resources

CSS animation can be tricky, but with these resources you'll find it a lot easier to get things moving.

Creating meaningful and beautiful CSS3 animation can be time-consuming and difficult, but luckily there are some great resources out there that you can use to jumpstart your creative process, and explore different areas in depth.

If you're just getting started, or if you could simply use some handy crib sheets and shortcuts, take a look at these essential resources.

01. Easing functions cheatsheet

Easing functions are easier with this cheatsheet

Timing functions specify the rate of change over time, and this site helps you choose the right one for your animation or transition. It features a gallery with Bézier curves where you can preview them, and quickly copy the code.

02. Animate.css

Get up and running fast with this library of ready-made animations

Dan Eden has compiled a library of beautiful CSS animations you can use in your projects. If you don't want to load the entire library into your site, the project is also a great source of inspiration.

03. Animate Plus

This animation library is great for mobile sites

Stripe is well known for its beautifully animated product pages. One of the masterminds behind these, Benjamin De Cock, has created a CSS and SVG animation library that is performant and lightweight, making it particularly well suited to mobile.

04. Motion and Meaning

Go deep into motion with Val and Cennydd's podcast

If you like podcasts, Val Head and Cennydd Bowles are hosting one for digital designers where they go into depth about motion.

05. Hover.css

You can mouseover each effect to see exactly what it does

Similar to Animate.css, Hover.css is a collection of CSS effects you can use in your projects. It focuses more on hover effects for links, buttons, images and so on.

Words: Tobias Ahlin

This article originally appeared in net magazine issue 281; buy it here!