- 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...
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!