CSS Animation Weekly #35 — Space, Innovative hover effects, free screencasts and more
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
A nice overview of how animation is being used in website UI.
A step-by-step guide to building an impressive hero header for your website, including helpful tips and advice.
This CSS section on Scrimba has some nice animation-related screencasts, all completely free.
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 ✨
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 👽
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.
Hover a gem to “collect” it in this neat game. How many can you get? 💎
Drag the slider to change the number on this timeframe concept. Lovely interaction.
Brawndo! Lovely background animation.
Nice animation of a pen drawing along a ruler 📏
Animation in the real world
Loads of subtle illustrative animation abounds in this infographic page from Murray Creative. 🙌
Level up your CSS animation skills
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.