CSS Background Animation

  • follow us in feedly
Published August 12, 2013 by Brad Knutson
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.

Get creative with it! Have you seen any cool examples lately? Post them in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “CSS Background Animation

  1. Jeniv

    Thanks for the tutorial,, i will use this wahy quickly on my blog post. I think is better to use more beautiful background for this not just flying clouds and bird. :)


Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">