CSS Background Animation

I remember the first time I saw a website with a moving background image. It immediately caught my eye, and I wasn’t able to focus on anything else on the page. It was so new…so cool…it was something I had never seen before.

At the time that I first saw a moving background, the website was no doubt built with 100% flash. Since then, Javascript has made it possible to animate background and other image elements to create similar effects.

Fast forward to today, and with the magic of CSS Keyframes and animations, we can create this effect with very little code.

View Demo

CSS for background cloud animation

Fairly simple right?

Essentially all we’re doing is creating a CSS Keyframe with name animatedBackground. This keyframe slides the background image by changing it’s position. We then use the CSS animation property to run the keyframe for 10 seconds, then repeat to infinity.

I set a horizontal position of -300px in the keyframe to move the clouds from right to left. The actual background image itself is 300px wide so I used that number as the position to make the animation smooth.

What about the bird?

Of course, how could we forget about the bird flying around?

View Demo

Same story here as before, but this time I am moving the bird vertically as well. Birds don’t fly in perfect horizontal lines after all.

There you have it. A very simple example. You could get real creative with this and create multiple layers, creating a more visually appealing cloud effect. You could add other items like sunshine, and so on and so forth.

Categories Blog