This week we're learning how the Web Animation API compares to CSS keyframe animations, and sharing some amazing examples of CSS and JavaScript animation.

♥️

Donovan at CSSAnimation.rocks 

Articles

CSS Animations vs the Web Animations API: A Case Study — bitsofco.de

Ever wondered how the Web Animations API compares to CSS animations? This article nicely explains and demonstrates how to create animations using both keyframes and JavaScript.

Featured

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

Guess what? I'm working on a course to help you apply your CSS animation knowledge to real-world examples. Join me, join a like-minded Slack community and be part of it.

As a CSS Animation Weekly reader, you can save 10% on the course. (Use discount code weekly01)

Inspiration

Obnoxious.css

"Animations for the strong of heart, and weak of mind" 🙀

Elastic Burger Animation

Very slick work here from Peter Barr - a Tweenmax-based burger navigation button 🍔

8 triangles (pure CSS animation loop)

Another incredible demo from Ana Tudor with overlapping triangles and CSS filters. Watch how it was coded on Youtube ▶︎

Bulge and Pinch Filter

Hilarious example of a bulge and pinch filter creating using PixiJS

Click and draw 3D

Click anywhere to place a pixel in this 3D rotating demo

CodePen - React Animated Page Transitions

Sarah Drasner shows how to use animated SVGs within React in this gorgeous demo. Press "Read more" to see the animations.

Animating an Image Sprite

Great use of CSS's "steps" timing function with the image sprite in this video game demo.

Animation in the real world

Storytrail — storytrail.co

From the first moment the loading animation appears, this site makes great use of movement. Go through and see the onboarding.