CSS3 Loading Animation Experiment

While playing DIRT 3, Catalin Rosu noticed a very cool triangle animation as part of their UI. Almost immediately, He thought about how to build a similar version of it using CSS3. For this example, he uses 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 creating a quite nice effect.

This is an experiment and you must be aware of it. For now, Catalin Rosu thinks an animated GIF will do the job better in most of cases. Also, this isn’t that example that advocates for using CSS3 stuff instead images to save HTTP requests. It is not applicable here as limited browser support for CSS3 animations has something to say. Though, he hopes you’ll find this example useful and inspiring for your future projects.