A huge week for CSS animation - explore everything from 3D transforms, creating curved animations, debugging using dev tools and all sorts of inspiration!

♥️

Donovan at CSSAnimation.rocks

Articles

Intro to CSS 3D transforms — 3dtransforms.desandro.com

Ever wanted to create a slick 3D-card flip animation? This tutorial will show you how to get started with 3D transitions

Inspecting Animations in DevTools — css-tricks.com

If you're not yet debugging your animations using browser dev tools, it's time to start!

Ideas for Proximity Feedback with Progressive Hover Effects — tympanus.net

Hover effects that begin as your cursor gets closer t the target! Neat!

Moving along a curved path in CSS with layered animation

A classic but worth revisiting - how to combine transforms to create beautifully organic curved animations with CSS

Series: Web Animations — itnext.io

An amazing series exploring everything about web animation - one to bookmark!

Featured

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

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.

Inspiration

Pure CSS Animated Rubik's Cube — codepen.io

A 3D spinning animated Rubik's cube!

CSS Animation - Circular Floating Action — codepen.io

Click the "+" to see this curved menu

Bodymovin.js — animation example — codepen.io

A slick choreographed set of animations building up the scene

Dreamco // Under Construction — codepen.io

Drifting clouds on this beautiful under-construction page

leaving out particularities — codepen.io

A beautiful example of noise and randomly generated paths that looks like something from inside the matrix

Expanding Input — codepen.io

Click the magnifying glass to start this fiendishly clever transition into a search input!

Nano Corgi — codepen.io

Super-cute little corgi doggo