Question

I’m really liking the mobile Gmail’s quite smooth page transitions, https://mail.google.com/mail/mu.

Does anyone know how they do this? Is there a library they use?

I had a look around myself but it wasn’t obvious. A hint would be much appreciated.

Answer 1

Looking at the code it seems they’re doing this with CSS3 transitions. Specifically

-webkit-transition-property: opacity;
-webkit-transition-duration: 1000ms;
-webkit-transition-timing-function: initial;
-webkit-transition-delay: initial;

Here’s the spec: http://www.w3.org/TR/css3-transitions/

Here’s some info on how they work: http://www.alistapart.com/articles/understanding-css3-transitions/