Thanks for inspiring my CSS implementation.

[abacaj]

http://codepen.io/abacaj/full/bdKPEz

[AlexeyBelezeko]

Nice @abacaj ! But you used only start end transform. For smooth and pixel perfect animation you have to use intermediate transforms and custom timing function.

[abacaj]

Update: I didn't have vendor-prefixes enabled view it again: http://codepen.io/abacaj/full/bdKPEz

Hey @AlexeyBelezeko Can you provide more details? I am not sure what you mean by only start & end transform?

I am also using custom timings like so:

transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1);
transition-delay: 0.25s, 0s, 0.25s, 0s, 0s;

As far as I know the custom timing function is cubic-bezier, which I used.

What browser are you using? On chrome it performs just like your Gif animation.