Intro to CSS Animations

Introduction

CSS3 comes with a variety of powerful features for styling a website’s presentation and creating a great user experience for the viewer. One of the more fun and interesting features within CSS3 would have to be the ability to create visually-appealing animations that leverage the browser’s rendering engine to achieve high performance results with no lag or jitter.

In this article, we’ll check out how to create custom animations in CSS3 from scratch, to create a cool hardware control panel effect, with moving sliders and a simulated waveform being drawn on an oscilloscope.

To work with this project, the only requirements are a modern web browser and an editor. A copy of the source is available here on GitHub.

HTML Layout

The markup for this project is in the usual index.html:

The head contains the typical title and description, along with metadata for the Open Graph protocol. The layout is very standard and straightforward, withmain and footer sections, an output element that will be used for simulating a device screen, an SVG drawing of a sinewave, and definitions for sliders. Notice that preserveAspectRatio and viewBox are set on the SVG to ensure that it will render and scale correctly. The SVG itself is made twice as long as it will be displayed and then its view box aspect ratio is set to 1:1, which causes only half of the width of the SVG to be displayed, allowing it to be animated by panning its contents along the x-axis, using animation properties defined in CSS.

That’s it for the HTML, which is kept clean and simple for this example.

CSS Styling

The first CSS file we’ll check out is style.css:

The first line imports the animation keyframes, which we will examine in a moment. First, let’s take a look at the styles for the main layout. The html and body elements are styled with the standard margin/padding reset and full height and width setting, and the output and section elements are styled with CSS3 Flexbox to allow them to scale proportionally with the screen.

The svg is set to 100% height and width to fill its parent container, and the g element, which contains the sinewave path itself, is given no fill and a stroke width of 1. The stroke color is driven by the animation defined for this element. Let’s check out that line and how it’s constructed:

animation: sinewave 2s linear infinite, crt 2s linear infinite;

This applies two animations separated by the comma delimiter: the sinewave keyframe animation, with a two-second duration and a linear animation curve that will run forever, and the crt animation with the same properties. Additional animations can be added, separated by commas as above.

Sliders are styled with slider and slider > thumb, and the set of thumb elements is given an animation property of its own:

animation: slider 0s linear infinite forwards;

The reason for 0s duration is that we’ll set the duration to a different value for each of the sliders, as follows:

slider:nth-child(1) > thumb { animation-duration: 2s; }slider:nth-child(2) > thumb { animation-duration: 5s; }slider:nth-child(3) > thumb { animation-duration: 3s; }slider:nth-child(4) > thumb { animation-duration: 4s; }

Each thumb gets a different animation-duration, meaning that each of them will slide up and down it’s track at a different speed, simulating controls on a control panel (such as an automated digital mixing console).

Keyframes

Finally, we’ll check out the keyframes definitions in keyframes.css:

This file contains the animation keyframes referenced in the previous file. The sinewave animation simply pans the element it’s applied to with a translateX function. Since only half the width of the SVG sinewave is being displayed, and the second half is an exact copy of the first, once the animation completes it will reset the translation from -100% to 0 with no visible change (since by the time the animation finishes, the rendered graphic looks exactly the same as it did at the beginning, allowing for a seamless reset). The crt animation animates the stroke color of the SVG to give it a cool glowing effect.

The slider animation positions the slider thumb vertically along its track, between 90% and 0% which causes them to slide up and down. The value 90% is chosen since the thumb’s height is 10% of the track, which will place it at the very bottom of the slider when positioned at 90%.

Conclusion

This simple example demonstrates some of the power available within CSS3 for controlling styles and animations. Leveraging the browser’s own rendering engine for animations is generally superior to implementing them in JavaScript, since rendering engines are purpose-built and finely-tuned for this exact purpose and the browser can properly schedule and manage resources for rendering using a powerful engine built in C++ instead of running the animation through the JavaScript VM to be interpreted and so forth.

Stay tuned for more advanced tutorials on CSS3 and other topics. Thanks for reading and good luck with making awesome animations in CSS3!

Kenneth Reilly (8_bit_hacker) is CTO of LevelUP