Насколько я понимаю, мы не можем реализовать с помощью css-переходов, но мы не можем реализовать с помощью css-анимации, но не наоборот.
То есть любой переход имеет css-анимационный эквивалент. Например, этот
.ablock:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
color: red;
background-color:pink;
}
- эквивалент следующего:
.ablock:hover {
-moz-animation-duration:1s;
-moz-animation-name:transition;
-webkit-animation-duration:1s;
-webkit-animation-name:transition;
}
@-moz-keyframes transition {
to {
color: red;
background-color: pink;
}
}
@-webkit-keyframes transition {
to {
color: red;
background-color: pink;
}
}
Мой вопрос - если мы говорим о браузере, поддерживающем как css-переходы, так и анимацию, то в каких случаях можно выбрать тот или иной подход? Что касается переходов, то я могу назвать только один - у них более лаконичный синтаксис, нам не нужно копировать вставлять огромные патроны кода для @-моз-клавишных кадров, @-вебкит-клавишных кадров и так далее.
Что касается управления из javascript, то гибкость и сложность анимации гораздо более подходящий инструмент (по крайней мере, на первый взгляд). Итак, что же такое случаи использования?
UPD:. Хорошо, позвольте мне попробовать перечислить интересную информацию, найденную в вопросах.