Grow your CSS skills. Land your dream job.

Parallax Background of Stars (plus CSS3 keyframe animation)

Published by Chris Coyier

This idea was originally published on 3/12/2008, where you had to resize the browser window to see the parallax. I updated it on 4/6/2009 to utilize jQuery to move the stars automatically. I'm now updating it again to use CSS3 to animate the stars.

There is some debate if these fancy transitions and animations that CSS3 bring us belong in CSS. It might be argued that things moving around like that is "behavior" and not "design" and thus belong in JavaScript. I disagree with that sentiment, and that animations are definitely "design" and if we can keep that stuff in CSS, we should. Thus, I'm updating this idea (see original links above) to utilize CSS3 keyframe animations.


The stars fly by WebKit browsers. In all others, resizing the browser window still yield a cool parallax effect.

View Demo   Download Files

Declaring keyframe Animation

This is how you declare a keyframe animation. We'll name our "STAR-MOVE":

@-webkit-keyframes STAR-MOVE {
	from {
		left: 0;
		top: 0;
	}
	to { 
		left: -10000px;
		top: -2000px;
	}
}

UPDATE: This is about twice as efficient (from my rough CPU monitoring test). Because here were are just shifting position whereas the old way we were expanding the size of the area the browser needed to render/keep track of.
@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 5% 5%
	}
	to { 
		background-position: 1300% 600%
	}
}

You aren't limited to "from" and "to", You can stick more of them in there, based on percentages. Like 40% { } which will animate to those properties/values when the animation is 40% complete.

Our animation is very simple, we will animate position of the background-image, basically pulling the elements toward the upper left. Not every single property is able to be animated, but generally anything with a numeric value (including colors) can be. But you can't, for example, animate a font from Helvetica to Georgia.

These properties will override any previous settings for the properties specified. So for example, since IE doesn't support these, you might want to set the properties with regular CSS in a way that makes sense if there is no animation. Then know that those properties will be overridden with the from/0% properties of the animation.

Using the keyframe animation

We have three "layers" of stars, each that cover the entire screen with a repeating alpha-transparent layer of background graphic stars. We can call the same animation on all three divs, only with different durations.

#background {
	background: black url(../images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 150s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/foreground.png) repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 300;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

The larger stars move faster (they are "closer" in the illusion and thus should go by faster). They appear to move faster because the duration of the animation is shorter, and thus they need to move a further distance in a shorter amount of time.

Animations use "easing" functions. That is, a mathematical formula is applied to control how quickly the animation "gets up to speed" and back down. Without easing, animations could look jerky and awkward. The default in webkit is "ease", which slowly brings an animation up to speed then slowly back down. In this particular example, that didn't make sense, because at the end of the 100s the largest stars use, the animation speed is so slow the stars behind it go faster (weird). So notice in the above code we reset the easing to "linear". For a complete list, see here.

Browser Support

WebKit browsers only (Safari, Mobile Safari, Chrome) at the moment. I know Firefox 3.7 is going to have support for transitions but I'm unclear on if it will have it's on prefix for keyframe animations or not. If you know, let me know.

Comments

  1. Very good post! thanks! very helpful

  2. Cool stuff, I am just concerned that this could bring us down a path we’ve been down before and one that I think we’ve recovered from. I’m talking about scrolling marquees, blinking text, off the shelf js animation scripts, useless flash animations.. I’d like to think we’ve learned how to be responsible with such animations, but judging from the past, I’m worried.

    • Someone made a comment the other day that I found funny and apt regarding this stuff.

      Should we turn off the ability for browsers to render images too then? People can do some pretty tasteless stuff with images. Maybe people aren’t responsible enough with them and we shouldn’t allow those.

    • Fre

      Well no, but you can’t deny that the proof of concept you’re showing here resembles the old geocities cliché very closely.

      I’m glad you are creating these things to show us what’s possible with new technologies, but sometimes I just have to wonder: whyyyy-yy-yy?! :)

      There’s no question about it, in the next 1 to 5 years there’s going to be a giant relapse to the websites we saw in mid-90’s.

    • O'Ryan

      I think this is a pretty sweet proof of concept.

      @ Dom while yes some may just copy, paste and then revisit the 90’s, i think what Chris is doing here is showing us the possibilities. So look past the stars and imagine all the other things that could be accomplished with the parallax effect.

      not only that but it demonstrates the power of CSS3.

      this makes me excited for the possibilities.

    • As Dom pointed out, it’s “a path we’ve been down before and one that I think we’ve recovered from.” The key part there is that we’ve recovered from it. We shouldn’t be crippling our abilities going forward just because there’s the potential for abuse. Technically, I can still build a site laid out with tables and styled with inline CSS, if I want to. So do we do away with those as well? Of course not, because we learned to use them for what they’re made for, and we’ll do the same with all of the flashy features of CSS3.

      Keep in mind that we can build abstraction layers that each contain features of the same language. In other words, maybe CSS3 does contain some features that border on stepping on Javascript’s toes … so what? If your interactions are kept separate, the same way that our content and style are in their own layers, the language is irrelevant. Maybe this is my desktop application background speaking, but when you’re used to building software in layers even when you’re staying in one language (such as C#), these issues are already sort of worked out mentally.

  3. Batfan

    Neat demonstration :)

    Not very practical but, neat.

  4. TurbineSeaplane

    Yikes.

    That animation keeps the Google Chrome Renderer pegged at 75% CPU usage (OS X).

    • I have around 12% with a somewhat dated windows-machine

    • I’m even seeing in the 80’s on an 8-core mac pro. But it’s smooth as a baby’s ass and doesn’t seem to slow down anything else. I’ve heard that webkit animations are hardware accelerated (unlike something like a JavaScript animation, which would be probably even more intensive and lacks hardware acceleration).

    • UPDATE: I think I was able to increase the CPU efficiency of the animation a bit. Instead of growing the size of the area (basically what changing the top and left values were doing) I’m just animating the background position. It seems to be an improvement from watching my own activity monitor. If anyone wants to try out both methods themselves and let me know, that’d be awesome. I’m not sure the best possible way to get metrics on that stuff.

    • Rolf

      60% of one core in Safari MacBookPro. Impressive demo, but I’m not sure it’s worth the cpu-cycles. Feels a little bit heavy on the cost-side (cpu-wise).

  5. Fre

    When I scroll down all I see is the half transparant pane of the content. The rest of the background is white.

    I’m using the latest Safari on Mac.

    • ML

      seconded for Chrome on Win
      not too hard to solve though

      I also agree with the people who don’t agree with these animations (also the 3D circle round thingy (jQuery)), these neat effects sure are nice but they take up lots of CPU. I wonder what the animation would be like on my netbook.

    • ML

      for example

      #background {
      background: black url(../images/background.png) repeat 5% 5%;
      position: fixed;
      ...
      }

      good thing this animation doesn’t work on FF anyway, because with this it’s probably going to be laggy as butt

    • ML

      disregard, you can see where the other animation begins

      welp

  6. Whenever I checkout the current crop of CSS3 animations it always amazes me how such simple, *2D* animation eats up CPU.

  7. Mads

    I’m sorry, but I think this effects moves us back to the 90s when people still hadn’t figured out how to use javascript for better rather than worse…

  8. Marco Carag

    There’s another important part of using CSS for this rather than JavaScript: hardware acceleration.

    You won’t get that with JS animation, which effectively is just changing the DOM every millisecond and forcing browser redraw each time

    Important to note that you won’t get it either in CSS that is manipulating box model (margin, position, width), rather than using the new CSS transform properties.

  9. Dennis K

    Great demonstration.

    I don’t know why everyone is so afraid that we are heading back down some dangerous path though. Flash, JS, CSS and HTML can all be used to create horrendous user experiences. For the most part though, the industry has evolved quite drastically since the days of blinking text and scrolling marquis.

    Still, we need to push forward and experiment with new technologies as they emerge…it’s the only way to understand them well enough to use responsibly.

    Keep up the great work, Chris!

  10. I think that this effect is tacky, and conjures up the nostalgia of my first website made in MS frontpage. For that reason I am a huge fan!

    For everyone that has something negative to say about this, well you know what spider-man’s dad said: “with great power comes great responsibility”. I think that CSS and JS give web designers great power! Just don’t go crazy with it.

  11. DJ

    Chris… I look at this as a cool excursion into your thinking, and the subtle nuances of coding. However, sorry but this effect sort of leaves me flat and I don’t see much use for it – perhaps because I had to stumble on the “key” to “resize the browser” then deliberately do something that I almost never do while surfing the web.

    Now if it worked while scrolling – that’s something that I REALLY have to do nearly always – then It would be one of those “subtle” effects that would be a surprise value added.

    I do like your compulsiveness in “cleaning up” past posts.

    • You could do the parallax with scrolling by watching the scroll position on the body for a change and setting the background-position based on that plus some kinda of delta multiplier. That would be friggin rad.

  12. I am thinking of using such trick on my site, but with more subtle effect so it not so noticeable / annoying.

    Animation should not distract from content.

  13. Tolana

    Was the problem of a blank background below the “fold” fixed on the demo page? I’m still seeing it on Safari 4.0.5 (Windows 7).

  14. great tutorials, but my note is that the moving is not smooth enough, how could i make it smooth ?

  15. chris

    hi chris,
    are you still out there?
    great tutorial – built one just to watch it go! One thing I noticed though, when applied to the of a page that has elements you need to scroll down to see (ie the page is taller than the screen), the background images don’t tile down the entire page ( el) – they only cover the bit you could see originally. I can’t figure out why! I can’t see that it’s set to “fixed” for example? Anyway, I’ve scoured the usual places and still can’t find an answer. Can you: help; ?
    btw, just reading the posts/queries/rants above, it’s hard to believe how conservative people are! All this whining about “back to the future”! I these guys had their way we’d still be listening to the radio, or watching b&w tv at best! As people go on-line for more varied reasons, they (and I) are looking for more and better offerings than the grim, still and silent pages these guys have been grinding out in the past. The day of the puritan is over – the future is coming….
    cheers.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".