This week we learn about some new approaches to combining animation effects, and being inspired by awesome CodePen examples!

♥️

Donovan at CSSAnimation.rocks

Additive Animation with the Web Animations API

It can be hard to apply more than one animation to an element, especially when animating the same property. Additive animation is going to help!

Making The Transition From After Effects To CSS Transitions And Keyframes — www.smashingmagazine.com

Using After Effects to design UI animations? Learn how to move to the world of CSS animation and create the same effects using code.

Featured

Level Up your CSS animation skills for just $10 - save 93% — courses.cssanimation.rocks

By popular demand, get this 4-hour course for just $10! Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more.

Tools

TweenDeck — johnpolacek.github.io

Next level animation for web presentations

Inspiration

Superman main titles text effect — codepen.io

Amazing use of ThreeJS in this 3D Superman credits effect!

DOT RUNNING — codepen.io

Slick bit of pixel animation on this runner! 🏃‍♀️

SVG Fire with Stick animation — codepen.io

An interesting take on the flame effect, this time using SVG 🔥

PB+J Loader — codepen.io

How I like my sandwich... loaded 🥪

CSS Corgi — codepen.io

A portrait of Clover the dog, in CSS 🐶

Animation in the real world

Annie Collections - Made in Italy — www.anniecollections.com

Lovely use of overlays to reveal the photography on scroll.