So much going on this week! Learn about the latest in innovative hover effects, build an awesome hero header, and catch some free screencasts. We've also found some awesome space themed inspiration.

♥️

Donovan at CSSAnimation.rocks

Design Trend: Innovative Hover Effects

A nice overview of how animation is being used in website UI.

Build an awesome Hero Header — cssanimation.rocks

A step-by-step guide to building an impressive hero header for your website, including helpful tips and advice.

Scrimba

This CSS section on Scrimba has some nice animation-related screencasts, all completely free.

Featured: Space

Meteor showers from space

A stunning visualisation of the Orionids meteor shower, and where all the debris lives in space. See how it plays out over time, pan and zoom around it ✨

How Far is it to Mars?

A lovely illustration of the distance (in pixels, if Earth was 100px wide) between us and Mars with the various landmarks along the way. Mind blowing 👽

Inspiration

CSS HSL background animation

A greta example of how we can create animations using gradient backgrounds. Since gradients are created in-browser as images, they can't be animated directly, so this approach using Sass sets up "steps" where each step is a gradient image.

Collect the Infinite Gems - Single HTML Element JS Game

Hover a gem to "collect" it in this neat game. How many can you get? 💎

Reactive Timeframe Concept

Drag the slider to change the number on this timeframe concept. Lovely interaction.

It's What Plants 🌳 🌾 Crave 😵

Brawndo! Lovely background animation.

Ruler

Nice animation of a pen drawing along a ruler 📏

Animation in the real world

Murray Tweet Index — murraytweetindex.ie

Loads of subtle illustrative animation abounds in this infographic page from Murray Creative. 🙌

Level up your CSS animation skills

New video lessons arriving soon — courses.cssanimation.rocks

Learn how to bring a website to life, step by step. Enrol now and get all new content, along with lifetime access and Slack membership.