An exciting week coming up! Along with the exciting #animationchat, we're loving the tilt hover effects and learning how to stagger animations.

♥️

Donovan at CSSAnimation.rocks

News: Upcoming Twitter chat

This Tuesday at 3pm Eastern (8pm GMT) we're trying something new. We'll be holding a Twitter-only #animationchat! For one hour, come take part in questions and answers all about web animation. It won't be just me, we'll be joined by the world famous web animator Val Head. 

If you have questions or just want to take part in the chat, use the hashtag #animationchat. Looking forward to seeing you there.

Articles

Tilt Hover Effects

Some ideas for hover animations with fancy tilt effects. Inspired by the hover effect seen on the Kikk 2015 website.

Staggering Animations

Learn how to stagger animations using JavaScript and CSS on this CSS Tricks guest post.

Inspiration

Make Christmas more magical with Bettys — magicalwith.bettys.co.uk

The use of animation on this Christmas special catalogue is just amazing - from Canvas to 3D transitions and parallax, it's all combined brilliantly. Check it out.

Random Text Shuffle — codepen.io

A fun text effect, in which the characters in a string a shuffled as they animate into place.

CSSonic run cycle — codepen.io

Pretty smooth animation cycle on this Sonic - gotta go fast!

Heart Construction Loading Animation

Ever wondered how to draw a heart with only HTML elements and no images? Here's a nicely illustrated example.

Animation in the Wild

Ueno. Digital agency. — ueno.co

This agency site combines video, staggered CSS animations and scroll events along with a wonderful whimsical style.

Don't forget...

CSS Animation 101 - Learn how to add animation to web pages using CSS - CSS Animation — cssanimation.rocks

One email from me, Donovan Hutchinson, each weekday for a month to teach you about CSS animation.

My course is currently "pay what you want" - so if you're on the fence, sign up for free and give it ago!