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.
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.
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
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.
If you like podcasts, Val Head and Cennydd Bowles are hosting one for digital designers where they go into depth about motion.
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