CSS3 Flickr Loading Animation (Spinner)

Rishabh

• 28486
• 21
• 3

Flickr's loading/spinning animation in CSS3 using bleeding edge CSS3 animation-direction properties like reverse and alternate-reverse. Some info on the different values accepted by animation-direction -

• normal - animation plays forward on each cycle and then resets to the beginning at the end. (defaul)
• alternate - animation direction and timing functions are reversed after each cycle.
• reverse - animation plays backwards every cycle, basically the opposite of normal.
• alternate-reverse - animation plays backwards on first play, then forwards and then continues to alternate.

Original code by Lea Verou.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room