This week we're sculpting our animations, learning how to use modern CSS approaches to animate gradients, and catching up with the state of UI design. Plus a load of great inspiration from animated 3D shapes to button interactions.

♥️

Donovan at CSSAnimation.rocks

Articles

Sculpting Software Animation

Designing animation is sculpting time. Timing is critical. If you don’t consider animation timing, you’re not designing animation.

The State of Changing Gradients with CSS Transitions and Animations

Ana Tudor shows us how CSS variables and Houdini combines to animate custom properties

Avocode 2017 UI Design Report — avocode.com

Lovely animations bring this UI design report to life!

Featured

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

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

Inspiration

DotCSS - Inspiration 2

I can't believe this is pure HTML/CSS! It's like some gorgeous 3D space-artifact / station created with dots, colours and animation.

Night & Day Toggle — codepen.io

An awesome day / night animated toggle

@keyframers 1.8.0 | Bike Blender 🚲🌪️

A great demo of interaction animation from the @keyframers - watch how it's coded in their stream!

Bokeh effect (CSS)

Another example from Louis Hoebregts - this time showing a lovely bokeh effect using CSS and HTML.

Button Nav "Type 2" — codepen.io

Slick transition on this flip-style button

CodePen - Buttons falling apart — codepen.io

Some fun animation styles when you click on these buttons

CSS Menu Icon Animation: Know Your Menu

Looking for ideas for animated open / close menu icons? Look no further