Использовать примеры для CSS-переходов и CSS-анимации

Насколько я понимаю, мы не можем реализовать с помощью 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:. Хорошо, позвольте мне попробовать перечислить интересную информацию, найденную в вопросах.

  • Этот материал предоставлен Романом Комаровым. Скажем, у нас есть развод и детский развод. Пока родители разводятся, мы переходим к детскому элементу. Как только мы забираем мышь, переход отменяется. Продолжительность этой отмены - это как раз то время, которое мы уже потратили на переход. Анимация отменяется "немедленно". Тем не менее, я не знаю, насколько стандартны эти два поведения.
5
задан shabunc 9 August 2011 в 19:28
поделиться