A huge week for CSS animation tutorials, tools and inspiration.

♥️

Donovan at CSSAnimation.rocks

Articles

The Power of Named Transitions in Vue — css-tricks.com

A great intro to animating using named transitions in VueJS!

Animation Performance 101: Measuring with Dev Tools — www.viget.com

Your ultimate guide to animation performance — always be measuring.

How Functional Animation Helps Improve User Experience — www.smashingmagazine.com

In case you missed it - a great overview on Smashing Magazine of how UX can benefit from good use of animation

Motus — alexcambose.ro

A handy little framework for applying keyframe-like styling to scroll position! Useful if you want to have something animate as the page scrolls

Featured

Save 70% on Annual SitePoint Premium Membership

This Easter special deal will disappear soon! Act now to save 70! That's $180 reduced to just $49 for a full year's access to:

• 200 + Design and Development books from the world's best tech publishers (including me!)

• 128+ Design and Development courses (including my CSS animation course!)

• New content added weekly.

Inspiration

Only CSS: Starfox

This is so amazing. Starfox created using CSS! To see how the positioning works, add a border to the ".trigger" class.

3D Scan

Oooh - lovely simple CSS-only effect showing a sphere being "scanned" through a series of lines in 3D

Pure CSS 4 Designers

I love all these pure-CSS animated scenes. I can't imagine how much work has gone into this demo!

Pure CSS Typings

Like something from the original Matrix, check out this CSS-animated typing

Classy hover effect

Hover these media blocks to see extra info appear with a nicely staggered animation

Sunrise and sunset

Some subtle colour animations brings together this lovely day / night cycle