Están buenos los efectos, le dí una mirada por arriba. No es el mismo objeto que se transforma, son dos objetos diferentes. Por ejemplo el circulo blanco tiene un efecto rotate.
CSS:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
El segundo círculo, el marrón, está oculto y por debajo del primero con una posición absoluta. La animación que tiene es la siguiente. También deberías cambiarle la opacidad de 0 a 100.
CSS:
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
Es bastante más complejo que solo estos dos códigos, pero para que te guíes. Saludos.