Parallax Background of Stars (plus CSS3 keyframe animation)

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.

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;
	}
}

@-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.