CSS Animation Weekly #165

This week we're animating ghost buttons using direction-aware CSS, delving into some math with linear interpolation, and exploring loads of cool CSS animations.

♥️ Donovan at CSSAnimation.rocks

Articles

A useful improvement to the way hover animations can respond to the direction of our mouse movement

A deep dive into the math behind interpolation functions! Could be interesting if you're building custom animations

Loads of cool examples of animations made using the Splitting.js package!

Featured

(CSS Animation 101 book now available in arabic!)

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية على المواقع التي يصممونها عبر الحركات، إذ هنال...

Inspiration

Drag to explore this 3D mapped moon! Based on real photos of the moon's surface and animated using ThreeJS

Atmospheric little animation here showing how a long slow timing function can look great on text

This menu feels great to navigate around thanks to the small but nicely timed animations

A neat little hover effect on this outlined button

It's a bit of a CPU-killer but this ray-tracing metallic morphing animation is cool

That's all for this week! Remember if you'd like to support this newsletter head over to my Patreon page and pledge as little as $1 per month! Thanks!