This week we're animating mascots, workout out how to stop a rotating animation properly, and getting inspired by some amazing Codepens!

♥️

Donovan at CSSAnimation.rocks

Articles

Animating your mascot! Case study: “Jeff the PHP Butler”

Useful article on the steps involved in creating an animated PHP mascot!

CSS rotation animation back to 0deg on hover out

Not exactly an article but I thought this discussion was interesting - how do you create a rotating hover effect that animates back to the starting point on mouse out?

Inspiration

Found anything cool on your web travels? Let me know and you could even get a CSS Animation Rocks sticker as a thank you!

Interactions 2.0 — webflow.com

It's so great to see a push toward more fun, more animation and interesting interactions own the web. This demo from Webflow made my day and I can't wait to give "Interactions 2.0" a go.

Pure CSS Pizza Toggles — codepen.io

Thought toggles couldn't get more exciting? Think again! 🍕

Space Jam Logo CSS Only 🐰🏀

Lovely example of CSS design and animation in this classic Space Jam logo 🌌

CodePen - Canvas Filters — codepen.io

Drag your mouse around to see some incredibly smooth animated stars ✨

Only CSS: Creamy <3

Drag your cursor across this block to see it gloopily melt into shape. Weird CSS fun! (Looks best on Chrome)

A Pen by Daniel — codepen.io

Subtle animation brings this lovely weather demo to life 🌧