Então, eu entendo como executar as transições e animações CSS3. O que não está claro, e eu pesquisei, é quando usar qual.

Por exemplo, se eu quiser fazer uma bola quicar, é claro que a animação é o caminho a percorrer. Eu poderia fornecer quadros-chave e o navegador faria os quadros intermediários e eu teria uma boa animação em andamento.

No entanto, há casos em que o dito efeito pode ser alcançado de qualquer maneira. Um exemplo simples e comum seria implementar o menu de gaveta deslizante no estilo do facebook:

Este efeito pode ser alcançado através de transições como:

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

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

http://jsfiddle.net/NwEGz/

Ou, através de animações como esta:

.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/

Com HTML que parece assim:

<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>

E este script jQuery que acompanha:

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

O que eu gostaria de entender é quais são os prós e contras dessas abordagens.

Uma diferença óbvia é que animar está tomando muito mais código.Animação oferece melhor flexibilidade. Eu posso ter animação diferente para deslizar para fora e emExiste algo que pode ser dito sobre o desempenho. Ambos aproveitam a aceleração de p / p?Que é mais moderno e o caminho daqui para frenteQualquer outra coisa que você poderia adicionar?