Переходы против анимации
При анимации в Интернете вы используете переход или анимацию? Есть моменты, когда вы хотели бы выбрать один над другим. Давайте обсудим различия.
Что такое переходы?
Переход происходит, когда элемент переходит из одного состояния в другое, и браузер заполняет это состояние изменением последовательности промежуточных кадров. У него есть начало и конец состояния.
Мы чаще всего видим переходы, используемые при наведении, или когда информация на странице добавляется или удаляется. Состояния наведения могут быть тонким изменением цвета шрифта, и информация на странице может исчезать с невидимого на видимое.
Поскольку переходы ограничены этими двумя этапами, им может не хватать нюансов анимации, но в то же время их будет проще использовать.
Когда их использовать
Если вы хотите плавно перевести элемент из одного состояния в другое, переход является хорошим выбором. Простые изменения обычно можно обрабатывать с помощью переходов, а функции синхронизации можно использовать для настройки способа перехода.
Что такое анимация?
CSS-анимация является более мощной альтернативой переходам. Вместо того чтобы полагаться на изменение из одного начального состояния в конечное состояние, анимации могут состоять из любого количества промежуточных состояний, как вам угодно, и предлагают больший контроль над тем, как анимируются состояния.
Если переход идет только от A к B, анимация может переходить с A, B, C на D. Или любое количество этапов по мере необходимости.
Анимации достигают этого с помощью наборов keyframes. Там, где переход может быть указан с одной строкой в классе, анимация работает, ссылаясь на набор ключевых кадров, которые описаны отдельно в CSS.
Когда их использовать
Если анимация должна запускаться при загрузке страницы или является более сложной, чем простое изменение состояния от А до В, CSS-анимация может быть более подходящей.
В итоге
Переходы для создания плавного перехода из одного состояния в другое и анимации для более сложных серий движений.
Переходы, как правило, проще в создании и управлении, и применяются в большинстве ситуаций. Если вам нужен больший контроль над анимацией элемента с помощью последовательности шагов или если анимация должна начинаться при загрузке, то анимация с ключевыми кадрами может быть лучшим выбором.