Итак, я понимаю, как выполнять CSS3-переходы и анимацию. Что не ясно, и я погуглил, это когда использовать какой.

Например, если я хочу сделать отскок мяча, ясно, что анимация - это путь. Я мог бы предоставить ключевые кадры, и браузер сделал бы промежуточные кадры, и у меня будет хорошая анимация.

Однако есть случаи, когда указанный эффект может быть достигнут в любом случае. Простым и распространенным примером будет реализация меню выдвижного ящика в стиле Facebook:

Этот эффект может быть достигнут с помощью таких переходов:

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

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

http://jsfiddle.net/NwEGz/

Или с помощью анимации, например, так:

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

С HTML это выглядит так:

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

И этот сопровождающий скрипт jQuery:

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

Я хотел бы понять, каковы плюсы и минусы этих подходов.

Одно очевидное отличие состоит в том, что для анимации требуется гораздо больше кода.Анимация дает лучшую гибкость. Я могу иметь различную анимацию для скольжения и вЕсть ли что-то, что можно сказать о производительности. Используют ли оба преимущества ч / б ускорения?Что является более современным и путь впередЧто-нибудь еще можно добавить?