While playing DIRT 3 - the video game, I’ve noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3.
So, in this article, you’ll see an experiment about how to create a simple CSS3 loading animation.
For this example, I’ll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help to create a quite nice effect.
Initially, I wanted to use pseudo-elements in order to have fewer markup elements. But, the thing is that generated content can’t be animated yet in other browsers than Mozilla Firefox.
Here’s how the markup looks like:
There are some things you may find interesting here:
For a nice color fade across all three triangles, you need to increment the animation-delay.
Notice the gap between
100%for the rotation keyframes. This helps to add a stop effect for the animation.
This is an experiment and you must be aware of it. For now, I think an animated GIF will do the job better in most cases.
Also, this isn’t that example that advocates for using CSS3 stuff instead of images to save HTTP requests. It is not applicable here as limited browser support for CSS3 animations has something to say. Though, I hope you’ll find this example useful and inspiring for your future projects.