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)

- 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.

- animation direction and timing functions are reversed after each cycle. reverse - animation plays backwards every cycle, basically the opposite of normal .

- animation plays backwards every cycle, basically the opposite of . alternate-reverse - animation plays backwards on first play, then forwards and then continues to alternate.

Original code by Lea Verou.

Related: