This week we're building an interactive infographic, checking out the free CSS Animation 101 ebook, and having our collective minds blown by some amazing CSS animation inspiration!

♥️

Donovan at CSSAnimation.rocks

Articles

Building An Interactive Infographic With Vue.js — www.smashingmagazine.com

An excellent tutorial on how to build your very own interactive infographic using Vue.js, SVG and GreenSock's GSAP for animation.

Featured

Free eBook: Learn how to bring animation to your web projects — github.com

Based on the popular email course, this is an introduction to how CSS animation works and can bring life to your web UI. Get it as PDF, ePub or even HTML for free here.

Inspiration

CSS-Only Walking Dog — codepen.io

So much character in the way this CSS animated doggo moves! 🐕

CSS 3D Pikachu — codepen.io

This 3D Pikachu is created with only HTML CSS. Crazy - select the "grid" option to see how the blocks are put together

They Bounce 🐯 — codepen.io

T-I-double guh-er! That spells Tigger. Also, best viewed on Chrome. Hoo-hoo-hooo!

Slice hover effect — codepen.io

A neat little hover effect where the new image fades in in slices

HomoNoosphericus — codepen.io

HomoNoosphericus is "an interactive piece about a self-realizing robot who wants to break free"

Radio Button Dot-Slider (Pure CSS) — codepen.io

A lovely little example of pure CSS-animated selectors with a dot that moves between each

Gorilla in 3D — codepen.io

A lovely 3D gorilla. Uses CSS vars + cursor position for rotation control

Animation in the real world

Awwwards Conference — conference.awwwards.com

Not only does this look like an excellent conference, the website has a load of lovely animations and transitions

That's it for this week! Don't forget you can still get my course for just $10 here...

Level Up your CSS animation skills — courses.cssanimation.rocks

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.