Если вы читали наш цикл уроков о переходах CSS3, то знаете, что переходы — это анимированные эффекты между начальным и конечным состояниями, которые запускаются событием, таким как активация псевдокласса CSS :hover или событием Javascript. В этом цикле уроков мы рассмотрим анимации CSS3. У них много общего с переходами, но они более гибкие и несколько более сложные в использовании. Это первая часть из цикла, состоящего из четырех уроков об анимациях CSS3, но каждый урок можно изучать отдельно или не по порядку. И теперь ответим на наш первый вопрос. 

Как анимации отличаются от переходов? 

Есть несколько важных отличий:

1. Как и переходу, анимации можно задать начальное и конечное состояние, но ей также можно задать сколько угодно промежуточных состояний, чтобы создать более сложные эффекты.
2. Анимацию можно запустить как переход, а также она может начаться сама по себе, например, сразу после загрузки страницы.
3. 3.  Переход запуститься только по событию активации или деактивации, анимация может прокручиваться бесконечное или заданное количество раз.
4. Анимация по кругу может проигрываться вперед, назад или туда-обратно.
5. Код CSS для анимации более громоздкий и сложный в написании, но он несомненно проще, чем сопоставимый код JavaScript.

Существует мнение, что анимации должны обрабатываться JavaScript, потому что их реализация зависит от браузера. Но это не так. Браузеры только аппроксимируют кадры между состояниями, они создают недостающие кадры анимации, так что Вам не нужно их задавать. Если же Вам нужно добавить сложные взаимодействия или контроль столкновений, Вам по-прежнему нужен JavaScript.

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

Как определяется анимация? 

Анимации определяются с помощью:

Ключевых кадров 

Вы, возможно, слышали термин «ключевые кадры» в связи с обработкой видео. Один ключевой кадр определяет место в анимации, где задано известное состояние, например:

• когда выполнено 0%, цвет фона синий
• когда выполнено 50%, цвет фона зеленый
• когда выполнено 100%, цвет фона красный

Цвета между синим и зеленым, зеленым и красным не важны, их определит браузер.

Свойства анимации 

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

Какие свойства CSS могут быть анимированы? 

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

Свойства, использующие такие ключевые значения, как display: none;, visibility: hidden; и height: auto; не могут быть анимированы. Обратитесь к уроку «Основы свойств переходов» для более детального объяснения и некоторых обходных путей.

Поддержка анимации разными браузерами 

Анимации CSS3 поддерживаются браузерами Firefox, Internet Explorer от 10 версии и устаревшими версиями Opera, такими как 12, без приставки производителя.  Браузерам на движке Webkit и его ответвлениях, включая Chrome, Safari и Opera от версии 15, требуется приставка производителя -webkit- для определения всех ключевых кадров и свойств. Браузер Internet Explorer версии 9 и ниже не поддерживают анимации.

Как работают анимации именно в интересующих Вас браузерах, можно проверить, открыв в них демонстрацию работы.

Практика показывает, что:

• Все современные версии браузеров отлично справляются с задачей.
• Некоторые старые версии браузера Chromе и Opera 15 версии не меняют радиус границы и цвет фона.
• Браузер Firefox обычно лучше других браузеров справляется с анимациями, даже в старых версиях, и выполняет анимации, как ожидается.
• Internet Explorer 10 версии в целом справляется, но иногда не показывает некоторые незначительные эффекты, такие как тень блока.
• Всем версиям браузеров на движке Webkit нужна приставка производителя, что удваивает количество необходимого кода. Старые версии браузеров на этом движке иногда не справлялись с некоторыми свойствами CSS у анимация, например в нашем случае, из-за трансформации поворота.

К счастью, различия даже раньше имели небольшое значение, а теперь встречаются совсем редко. Если анимация CSS3 с чем-то не справляется, начальное и конечное состояния все равно будут рано или поздно достигнуты. В худшем случае анимации не произойдет, но это никогда не должно создать непреодолимых проблем в отображении содержимого.

В следующей части мы рассмотрим ключевые кадры и свойства анимации.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также: