CSS 3 has come a long way and it is now possible to construct complex animations without a line of JavaScript. This guide shows how to implement the Star Wars (1977) intro scroller in pure CSS.

This animation was inspired by Tim Pietrusky’s Star Wars intro. This implementation contains no JavaScript at all, adds a starfield, and the SVG image used for the Star Wars logo is actually stored inside the CSS as a base-64 encoded image.

See the pen on CodePen.

Storing an SVG image inside CSS

Just like you can store bitmap images in CSS using base 64 encoding, the same is true for SVG.

background-image: url("data:image/svg+xml;base64,PHN2Z...N2Zz4=");

This can be done either with or without base 64 encoding, but without encoding care must be taken that the SVG string contains no linebreaks and is properly URL-encoded, otherwise special characters like # will cause errors. With base 64 encoding, URL encoding is not required, but the base 64 string will be larger than the original SVG string.

The logo used in this animation came from WikiMedia, and I altered the SVG content to remove its black background. The resulting transparent logo can now be projected over the starfield background.

Animation sequencing

There are three animations in this code: the intro text, the Star Wars logo, and the actual scroller. In order to make them play one after the other (without using any JavaScript), they are all set to take exactly 100 seconds and the keyframes in the animation implement the delays necessary to make the sequence play correctly. This method also allows all animations to loop at the exact end of the movie so that they all start again when the movie repeats. Dimensions and centering

All dimensions of text and images are specified as percentages and ems, so that the animation works well on any screen size. Vertical centering of elements is done using CSS 3 transforms:

top: 50%;
transform: translateY(-50%);

This way, the elements in the animation are centered on the screen even when the screen is resized during the animation.