CSS Background Animations

Written by David Walsh on April 25, 2013 · 21 Comments

Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates the background image (via background position) of a given element.

The CSS

We'll use CSS animations instead of transitions for this effect:

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

With the animation code in place, now it's time to apply it to an element with a background image:

#animate-area	{ 
	width: 560px; 
	height: 400px; 
	background-image: url(bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;

	animation: animatedBackground 40s linear infinite;
}

The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times.

How epic is it that we don't need to use JavaScript to manage these animations anymore?  Of course the mess of vendor prefixes to accomplish the animation sucks, but at least the animations are much more efficient and more easily configurable!

Comments

  1. May I suggest to use multiple background images to create a cool parallax effect in that cloud background?

  2. Easy and efficient! Thanks for this css trick!

  3. wow .. very awesome animation friend ,,,,,,,,, i love it .

  4. Wow, great post and very thorough. Out of interest, where did you get the cloud image from? I did a similar tutorial on my blog about using CSS sprites to create a basic button. I guess using the same idea you could even animate the background of the button.

  5. As MaxArt suggested, having multiple (small in file-size) backgrounds could create a cool effect. So I experimented! Check it out: http://www.creativewebgroup.co.uk/library/background.html

  6. As MaxArt suggested, having multiple (small in file-size) backgrounds could create a cool effect. So I experimented!

    Check it out: http://www.creativewebgroup.co.uk/library/background.html

    • My apologies for the multiple post! Browser wouldn’t load the comment!

  7. minhyung April 28, 2013

    cool, But the many paint calls happen ~ during animation

  8. For this example and many others, the “from” keyframe is not needed. This works just as well:

    @keyframes animatedBackground {
        to { background-position-x:100%; }
    }
  9. Very nice tutorial. Your article, and MaxArt’s comment, encouraged me to create my own version, with parallax effect:

    Demo:
    http://demo.cmorales.es/background-animation/prefixed.html

    Tutorial (in Spanish):
    http://cmorales.es/tutorial/fondo-animado-con-css3/

  10. Hardeep Asrani May 13, 2013

    great tutorial..going to try it for sure :)

  11. where do you put the first piece of code?

  12. Hey David,

    This is indeed an awesome post. I tried it and it felt really cool.

    However, when i expanded the width to say 1000 or 2000 to fit the screen width, the animation restarts from the 1st frame creating a start effect after some seconds and it doesn’t look like a seamless flow of animation. I hope you got me.

    Try increasing the width and reducing the animation time(seconds). :)

  13. Vincent July 24, 2013

    I had the same problem with the stutter when the image reached the end and started over (as described by Priyank Rathod). The problem is either the width of the div or the image itself. You have to create the image in such a way that when it reaches the end within its div (or whatever – in my case it was a TD), it looks exactly as it would as if it were still at the beginning. You essentially have to define the width of the div and create the image to be the exact same width – minus the borders of the div – and the left side of the image has to connect to the right side seamlessly. (I also removed the width and height specs from the css but not sure if that made a difference.)

  14. Nice trick, looking awesome to me.

    What about the animation done in background all over the page. I means if Image goes smaller then the size of monitor then maybe some trouble will happen.

  15. apology, I came out excellent animation, unfortunately you can only see in firefox, and I can not see it or tablet or chrome, there is a kit for the other browsers, or in this case you could do, you and I hope your answer is urgent

  16. why this is not working in chrome? can anybody explain? only working in the FF. Thanks in advance.

  17. ops. fixed it :)

    @-webkit-keyframes animatedBackground{
    	from { background-position: 0 0; }
    	to { background-position: 100% 0; }
    }
    

    how fool i was. thanks for this David. much appreciated.

  18. Cool, but on old computers like mine it goes 90% CPU

  19. I have tried this out with an animation that extends the full width of the browser it works fine unless your on a big screen when you extend it outwards to full width it then goes from left to right! How do I stop that from happening?
    Thanks,

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Unicode CSS Classes
Newer
Turn Your Web Application into a Firefox OS App in 5 Minutes