CSS: анимация против перехода ⇐ CSS

[Anonymous]

Я понимаю, как выполнить как переходы CSS3 и анимации. Что неясно, так это когда использовать, что. < /P>
Например, если я хочу сделать отскок мяча, ясно, что анимация - это путь. Я мог бы предоставить ключевые кадры, и браузер будет делать промежуточные рамки, и у меня будет хорошая анимация. Простым и распространенным примером будет реализация меню скольжения в стиле Facebook: < /p>
Этот эффект может быть достигнут с помощью переходов, таких как SO: < /p>

Код: Выделить всё

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

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

http://jsfiddle.net/nwegz/
или, через анимации, как SO:

Код: Выделить всё

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

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

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

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

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

http://jsfiddle.net/4z5mr/
с html, который выглядит так:


Click Me


< /code>
и, это сопровождающее jQuery: < /p>
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
< /code>
Я хотел бы понять, каковы плюсы и минусы этих подходов. Я могу иметь различную анимацию для выхода и в. < /Li>
Есть ли что -то, что можно сказать о производительности. Используют ли оба аппаратное ускорение?>

Подробнее здесь: https://stackoverflow.com/questions/205 ... transition