6.3 Javascript Animation

New Material

Learn to create animations for the web using Javascript with CSS.

Create a Simple Javascript Animation

This simple exercise shows how to use Javascript to create animation by changing CSS properties over time with setInterval().

To access and change styles on any element you can use the style property. Add this code to a script tag before the closing body tag in index.html and test it. This single line of code will change the opacity of everything on the page using a decimal value between 0 and 1. You could select any element on the page but we are using the body to keep the example simple.

<script>
  document.body.style.opacity = .5;
</script>

Replace the above line of code with this next sample. The transform property requires a string containing one or more transform functions. The rotate() function uses a degree unit between parentheses.

document.body.style.transform = `rotate(90deg)`;

Change your script to match the below code which uses a built-in method called setInterval() that repeatedly executes a block of code. The setInterval() method accepts two parameters (a.k.a. arguments): a block of code that is executed repeatedly, and the interval in milliseconds (1000ms = 1s) that controls the frequency the code block runs. You can see that every 1/10th of a second (or 100ms) the repeated code increases the value of the rotation variable by 5 and then sets the value of document.body.style.transform. Test your document and watch as its contents rotate on the Z-axis.

let rotation = 0;
setInterval(function () {
  rotation += 5;
  document.body.style.transform = `rotate(${rotation}deg)`;
}, 100);

Continue experimenting with the number values to get a sense of how this block of code affects the page.

See the above code applied to a button:

CSS Animation

While Javascript can change values repeatedly using setInterval(), CSS has two methods that create motion automatically. A CSS animation uses the @keyframes rule to define the start and end values of a tween and the browser renders the frames between.

Remove or comment out the Javascript you added inside the script tag above, and add this block of code to your stylesheet. While the @keyframes rule specifies the values and when the property changes, the body rule defines parameters like the name (fadeOut) and duration (2 seconds) of the animation.

@keyframes animFrames {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.cssAnim {
  animation-name: animFrames;
  animation-duration: 2s;
}

Compare the performance of this with the code from the previous exercise you will see the CSS animation appears smoother. This is because it lets the browser optimize the rendering to minimize the frame-skipping that creates a stuttering effect. While setInterval() may be intuitive, a more efficient Javascript method exists called requestAnimationFrame(). See the documentation for substituting this method to increase your animation performance.

See the above code applied to a button:

CSS Transition

A CSS transition is different from a CSS animation, defining only the parameters of the transition, but not the start or end values or when they occur. This means your code will need to change properties using an event to start the effect. One benefit of CSS transitions is how easy it is to control when they start. Comment out or remove the previous CSS animation then add this transition to your body tag.

body {
  transition-property: transform;
  transition-duration: 3s;
}

Add this code to your script tag in the index file to start the transition. The click listener changes the transform style on the body by adding a random number between 1 and 20 degrees which the CSS transition will animate to the new value.

let rotation = 0;
document.addEventListener("click", function () {
  let min = 1;
  let max = 20;
  rotation += Math.random() * (max - min + 1) + min;
  document.body.style.transform = `rotate(${rotation}deg)`;
});

See the above code applied to a button:

Finished Prompt

The lines of the poem presented in rows and columns thanks to the CSS grid

Screenshot of the web page at the end of Section 6.1.2. The background covers the web page and text sits neatly on top of it.