A paddle steamer in the sky

Ross Hall

January 3, 2022
(Updated on December 27, 2021)

Cartoon graphic of a cloud moving across a landscape, designed to look like a paddle steamer

One of my seemingly frivolous CSS experiments. There’s always a purpose behind them. This one set out to achieve two things:

First, to create a single HTML file that contains everything the animation needs. The images are inline SVGs, and the CSS is inline. You can download the page to your machine, disconnect from the internet and it will still run.

Second, to coordinate different pieces of animation to create an effect. In this case, the passing of the land. There are three different layers for the ground, each moving at a different speed, and each using the same @keyframe animation.

Enjoy.

I'm Ross, a digital editorial designer and content creator from the UK now living in Japan. I help growing companies plan, source, produce and promote a range of content. Find out more

Never miss an update - subscribe to my weekly email alert.