Por lo tanto, entiendo cómo realizar transiciones y animaciones CSS3. Lo que no está claro, y he buscado en Google, es cuándo usar cuál.

Por ejemplo, si quiero hacer rebotar una pelota, está claro que la animación es el camino a seguir. Podría proporcionar fotogramas clave y el navegador haría los cuadros intermedios y tendré una buena animación en marcha.

Sin embargo, hay casos en que un efecto puede lograrse de cualquier manera. Un ejemplo simple y común sería implementar el menú del cajón deslizante estilo facebook:

Este efecto se puede lograr a través de transiciones así:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

O bien, a través de animaciones como tal:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

Con HTML que se ve así:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

Y, este script jQuery que acompaña:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

Lo que me gustaría entender es cuáles son los pros y los contras de estos enfoques.

Una diferencia obvia es que la animación requiere mucho más código.La animación da mayor flexibilidad. Puedo tener diferentes animaciones para deslizarse y entrar¿Hay algo que se pueda decir sobre el rendimiento? ¿Ambos aprovechan la aceleración de h / w?Que es más moderno y el camino a seguir.¿Algo más que puedas agregar?