Vaadin demo animation : How to create similar animation

Question

I am trying to build a client side application using Vaadin 7, and I found on their website this animation.

Does anybody knows how to do such animation, or is there a code sample which I could refere to. I imagine JQuery is used too.

Thank you in advance.

Answer 1

There is no code sample and jQuery is not used. The animation uses two concurrent CSS transitions rotating/scaling to opposite directions. It is non-trivial to get right and not all the browsers can do it at all (for those only scaling is used instead of rotation).