A massive week this week in animation as the new Boys and Girls website arrives, we learn how to animate native-like page transitions, progress bars and even make Mario Cart with CSS!

♥️

Donovan at CSSAnimation.rocks

Articles

Native-Like Animations for Page Transitions on the Web

Sarah Drasner brings another fantastic tutorial, this time creating native-like smooth animations for your web application page transitions

Animating Progress

The amazing Snook takes on the challenge of animating the "progress" element in this tutorial

Multidirectional Email Carousel

Use direction arrows to scroll in multiple directions over a larger image in this animated email carousel tutorial

SVG Line Animation for Beginners

Get started with animating SVG lines in this excellent walkthrough

Featured

Level your CSS animations skills up! — courses.cssanimation.rocks

Over 4 hours of advanced CSS animation tutorials for just $29! Join Donovan as he walks you through each step in creating animated hero pages, hover effects, scroll animations, carousels and more.

Inspiration

🏎 Mario Kart: CSS 🏁 — codeburst.io

Stunning example of how some HTML and CSS can create a Mario-cart style game, with no JS!

Boys and Girls Logo Animation

Amazing work from the agency Boys and Girls with this GSAP logo animation

Moonlight Effect — codepen.io

Masking combined with mouse movement makes for an amazing header-image demo

Animation in the real world

Boys + Girls — boysandgirls.ie

This week's featured website is the new agency site for Boys and Girls. Check out the beautiful transitions and animations throughout!