• CSS Animation Weekly
  • Posts
  • CSS Animation Weekly #18 - #animationchat, Tilt hover effect, staggering animations and inspiration

CSS Animation Weekly #18 - #animationchat, Tilt hover effect, staggering animations and inspiration

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

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

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

Inspiration

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.

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

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

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

Animation in the Wild

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

Don't forget...

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!