Random Colors and a Bouncy Square

by kirupa (https://www.kirupa.com/me/index.htm) | 14 May 2018

Outside

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.