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

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

5 голосов
/ 09 августа 2011

Насколько я понимаю, нет такой вещи, которую мы могли бы реализовать с помощью 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-переходы, так и анимации, каковы варианты использования?за выбор того или иного подхода?Что касается переходов, я могу назвать только один - у них более лаконичный синтаксис, нам не нужно копировать и вставлять огромные фрагменты кода для @ -moz-keyframes, @ -webkit-keyframes и т. Д.

Что касается управления из javascript, анимации гибкости и сложности являются гораздо более подходящим инструментом (по крайней мере, на первый взгляд).Итак, каковы варианты использования?

UPD: ОК, позвольте мне попытаться перечислить интересную информацию, найденную в вопросах.

  • Данный материал предоставлен Романом Комаровым.Скажем, у нас есть div и child div.Пока родительский div находится в переходе, мы переходим дочерний элемент.Как только мы убираем мышь, переход отменяется.Продолжительность этой отмены - это именно то время, которое мы уже потратили на переход.Анимация отменяется «немедленно».Тем не менее, я не знаю, насколько стандартны эти два поведения.

Ответы [ 2 ]

8 голосов
/ 09 августа 2011
  • Анимации могут быть зациклены (и могут быть ключевые кадры, да).
  • Переходы могут быть более гибкими, и вы можете легко выполнять переходы к различным значениям и в различных обстоятельствах.

Хотя вы можете эмулировать некоторые переходы с помощью анимации (как вы упоминали в своем посте), переходы просто более мощные:

  • Вы просто указываете, какие свойства вы должны анимировать и в каких условиях (используя различные селекторы)
  • Вы можете инициировать переход по-разному:
    1. Изменение свойств в CSS для псевдоклассификации: hover,: active и т. д. (Создание чистого пользовательского интерфейса CSS)
    2. Изменение свойств в разных классах для разных целей.
    3. Изменение свойств во встроенных стилях: в сочетании с JS это просто более мощно, чем анимация.
1 голос
/ 18 февраля 2014

С помощью переходов вы можете переходить между любыми значениями определенного свойства, к которым вы хотите перейти. Например, вы хотите изменить цвет ссылки, когда она наведена и активна: 

a {
    color: #000;
    transition: color .4s ease;
}
a:hover {
    color: #888;
}
a:active {
    color: #faa;
}

Вы независимы, какой цвет вы выбираете. Теперь, если вы хотите использовать стиль анимации, вы должны явно установить значение цвета для состояний анимации. И вы не можете легко анимировать между тремя состояниями: нормальным, парящим и активным. Вам нужны более сложные определения. Я попробую это с анимацией: 

a {
    color: #000;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toDefault;
}
a:hover {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toHover;
}
a:active {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toActive;
}
@keyframes toDefault {
    to {
        color: #000;
    }
}
@keyframes toHover {
    to {
        color: #888;
    }
}
@keyframes toActive {
    to {
        color: #faa;
    }
}

Теперь это не включает анимацию обратно в состояние раньше. Я не уверен, что ты сможешь получить это.

Короче говоря: с переходами вы можете анимировать неопределенный набор свойств и значений, в то время как анимации по ключевым кадрам используются для четко определенных анимаций и / или переходов.

...