WEB ANIMATION (https://www.kirupa.com/css_animations/index.htm)

BOOK (https://www.kirupa.com/book/animation_in_html_css_and_javascript.htm)

VIDEO (https://www.youtube.com/channel/UCZCQ3LXtU3IUzMBQBqN69KQ)

CSS Animation vs. requestAnimationFrame

by kirupa (https://www.kirupa.com/me/index.htm) | 24 April 2018

When it comes to creating animations, you have two popular approaches at your disposal. One approach involves the CSS animation syntax (https://www.kirupa.com/html5/introduction_css_animations.htm) where you have an animation property and a related @keyframes rule that details exactly what your animation will do and when it will do it.

Take a look at the following example of a CSS animation:

[Image: ] (https://www.kirupa.com/images/hexagon.svg)

You should see an image of a hexagon bouncing up and down, and the CSS behind making this image animate is the following:

#hexagon {
  animation: bobble 2s infinite;
}
@keyframes bobble {
    0% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(40px);
    }
    100% {
        transform: translateY(10px);
    }
}

The other approach is a fully JavaScript-based one (https://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm) where we rely on an animation loop created by requestAnimationFrame. Below is an example of an animation created using it:

The relevant code for making this circle move is the following:

var currentPos = 0;

function moveThing() {
  currentPos += 5;

  theThing.style.left = currentPos + "px";

  if (Math.abs(currentPos) >= 900) {
    currentPos = -500;
  }

  requestAnimationFrame(moveThing);
}
moveThing();

With two seemingly similar approaches for animating property changes, you may be wondering when you would need to use which approach.

A Quick Glance at the Two Approaches

Conclusion

The pulsing circle effect is one of my favorite examples because of how simple it really is. At first glance, creating this effect may look like it will need some JavaScript or an animation defined entirely on the canvas. By taking advantage of the animation-delay property and how it treats negative values, our path is much more simple. All we needed to do was copy/paste a few more circles and alter the animation-delay value each one sported. Simple!

If you liked this and want to see more, check out all the Web Animation tutorials (https://www.kirupa.com/html5/learn_animation.htm) on this site.