O'Reilly

Multiple Background CSS Animations

By on  

CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with concessions.  Let's take a look at how it's done!

The CSS

So multiple background images on an element is something we've been able to do for quite a while now, simply separate them with commas:

.animate-area	{ 
	background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
	background-position: 20px -90px, 30px 80px, 0px 0px;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

Note that the background image that you want at the top of the stack should go first in the image list.  Animating the backgrounds requires moving the background-position, also separated by commas:

@keyframes animatedBird {
	from { background-position: 20px 20px, 30px 80px, 0 0; }
	to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
		
.animate-area	{ 
	animation: animatedBird 4s linear infinite;
}

The result is three moving pieces inside one element!

Of course this isn't an ideal case because you can't separately change background-positions and thus you need to work with the same duration for each background image.  Multiple animations can be set on selectors with CSS, but since it's the one property being changed, we're just out of luck!

Track.js Error Reporting

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

  • CSS Columns

    One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a...

  • Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

Discussion

  1. looks great as usually,
    now ready to make another article to combine this stuff ;)

  2. Great Tutorial David. Just with a few lines of CSS codes to create such a beautiful animation.
    Thanks.

  3. Nice tutorial! I never thought that making animation using so easy. But the problem is it doesn’t work in old browsers! :(

  4. Mich

    @Kiash: It’s time to stop using old browsers

  5. Crispen Smith

    David, I wanted to thank you for an awesome article. You got me thinking thought about the limitations and working within them.

    It seems that all is not lost when it comes to “story telling” via this technique.

    I did up a quick pen to explore these limitations.

    http://codepen.io/Crispen_Smith/pen/HGsxw

  6. Hichem benchaaben

    Cool but , why you not incorporate a fallback option for non supported browser in your tutorials ?
    Like you begin first of all by saying hey guys, check which browser can do this : ……
    Here is what usually will look like ……
    Here is the polyfills which you should do ….

  7. If your only concern is the markup and you don’t mind more complex CSS, an alternative is using pseudo elements which allows for the same animations using different durations: http://codepen.io/bananascript/pen/sBlhm

  8. Jesse

    Hi, great stuff!
    I’ve got a problem though – is there any way of getting this to work with multiple background images if I’m using the new extra-specific background-position as so:

    background-position: top 25% left 100px, bottom 50px right: 10%;
    

    ?????
    I’m pulling my hair out because I need to animate a multiple background system where I’m using this four-value background-position. Is it actually possible?
    Thanks in advance!

  9. Jesse

    OK, please excuse me, I’ve just answered my own question. It works!
    Just so that you know, it is imperative that when you’re using specific position syntax (background-position: bottom 10% right 50px; for example), when animating you cannot swap from one side to another (for example, you cannot animate from “background-position: bottom 10% right 50px” to “background-position: bottom 10% left 50px”; both values of start and end would have to be bottom and right in this case, not bottom right and then bottom left).

    Example of my code (yes, I know, it’s insane…):

    @keyframes bgMov { from {background-position: bottom -30% left 0, bottom 40% left 2%, top 60% left 0, top 95% right 0, top 78% left 0, top 65% right 0, top 59% left 0, top 55% right 0, top left;} to {background-position: bottom -30% left 586px, bottom 40% left 2%, top 60% left 0, top 95% right 520px, top 78% left 400px, top 65% right 260px, top 59% left 180px, top 55% right 120px, top left;} }
    

    Thanks anyway!

  10. I’ve modeled my code after http://davidwalsh.name/multiple-background-css-animations (demo http://davidwalsh.name/demo/multiple-background-css-animations.php).

    Here’s my adaptation (I’ll also paste it below): http://jsbin.com/cifig/1/

    The goal is to create an infinitely scrolling, two-layer parallax background. The effect works perfectly in Mac Chrome and Safari, but it stutters in Firefox.

    Any ideas why David Walsh’s version works in all three browsers, but mine fails? Thanks!

      body {
        background-color: black;
      }
    
      #container {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
      }
    
      @-webkit-keyframes scrollBg {
        100% { background-position: 0 0; }
      }
    
      @keyframes scrollBg {
        100% { background-position: 0 0; }
      }
    
      .shotsBg1 {
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url(http://shotseverybody.com/images/shot_tile.png);
        background-size: 128px 156px;
        background-position: 0 -156px;
        opacity: 0.5;
        -webkit-animation: scrollBg 2.5s linear infinite;
        animation: scrollBg 2.5s linear infinite;
      }
    
      .shotsBg2 {
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url(http://shotseverybody.com/images/shot_tile.png);
        background-size: 64px 78px;
        background-position: 0 -78px;
        opacity: 0.25;
        -webkit-animation: scrollBg 5s linear infinite;
        animation: scrollBg 5s linear infinite;
      }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...