Если вы следите за моей недавней серией о переходах CSS3 , вы поймете, что это анимированный эффект между начальным и конечным состоянием, которое запускается триггером, таким как CSS: hover или событие JavaScript.
В этой серии мы рассмотрим анимацию CSS3. Они разделяют многие из тех же понятий, что и переходы, но гораздо более гибки, если их немного сложнее использовать.
Это первая из четырех статей о CSS3-анимациях, но каждую статью можно читать по отдельности или не по порядку. Наш начальный вопрос …
Чем анимация отличается от переходов?
Есть ряд критических отличий:
- Подобно переходам, анимация может определять начальное и конечное состояние, но она также может указывать любое количество промежуточных состояний для создания более сложных эффектов.
- Анимация может запускаться как переход, но она также может запускаться без запуска, например, сразу после загрузки страницы
- В то время как переход будет реагировать только тогда, когда триггер активирован или деактивирован, анимация может зацикливаться конечное или бесконечное число раз
- Цикл анимации может воспроизводиться вперед, назад или попеременно между ними.
- Анимационный CSS более многословен и труден для написания … но он, несомненно, проще, чем сопоставимый код JavaScript.
Есть те, кто утверждает, что анимации должны обрабатываться JavaScript, потому что они поведенческие. Они не. Браузер выполняет только анимацию кадров между состояниями; он генерирует недостающие кадры анимации, поэтому вам не нужно. Если вы хотите добавить сложную интерактивность или контроль столкновений, вам все равно понадобится JavaScript.
Преимущества CSS3-анимации такие же, как и у переходов: их легко создавать, а сложные сложные эффекты обрабатываются браузером, а не вашим кодом.
Как вы определяете анимацию?
Анимация определяется с помощью:
Keyframes
«Ключевые кадры» — это термин, который вы, возможно, слышали в отношении редактирования видео. Один ключевой кадр определяет точку во время анимации, где указывается известное состояние, например
- при завершении 0% цвет фона синий
- при завершении 50% цвет фона зеленый
- на 100%, цвет фона красный
Вы не заботитесь обо всех цветах между синим и зеленым или зеленым и красным; браузер определит их.
Набор ключевых кадров получает имя, поэтому его можно использовать на любом количестве элементов.
Свойства анимации
Ключевые кадры применяются к элементам с использованием ряда свойств, которые определяют имя, продолжительность, функции синхронизации и повторяющиеся параметры.
Какие свойства CSS можно анимировать?
Подобно переходам CSS3 , вы можете анимировать свойства CSS только с дискретными значениями, которые меняются между ключевыми кадрами. Сюда входят свойства макета (ширина, высота, отступы, поля, границы), позиционные свойства (слева, справа, сверху, снизу), преобразования, размеры шрифта, цвета, цвета фона и прозрачность.
Свойства, которые используют значение ключевого слова, например display: none; , visibility: hidden; или height: auto; не может быть анимировано. Обратитесь к CSS3 Transition Property Basics для более подробного объяснения и некоторых обходных путей.
Поддержка кросс-браузерной анимации
CSS3 анимация поддерживается в Firefox, IE10 и Opera 12 без префикса. На момент написания статьи браузерам Webkit, включая Chrome, Safari и Opera 15+, требовался префикс -webkit- во всех определениях ключевых кадров и свойств. IE9 и ниже не поддерживают анимацию.
Это еще не все — откройте эту ссылку в различных браузерах:
Посмотреть демонстрационную страницу CSS3 …
Firefox, IE10 и Opera 12 работают отлично. Chrome и Opera 15 не могут изменить радиус границы и цвет фона. По моему опыту:
- Firefox, как правило, является браузером с лучшим поведением и реализует анимацию, как вы ожидаете.
- IE10 в целом хорош, но иногда не показывает некоторые незначительные эффекты, такие как тени от ящиков.
- Opera 12 хорошо применяет большинство эффектов, но часто ошибается.
- Браузеры webkit являются странными (и требуют префикса, который удваивает количество кода, которое вам нужно). В этом примере webkit отказывается от некоторых свойств CSS, потому что есть преобразование вращения. Это урок для любого разработчика, который думает, что webkit идеален и должен быть единственным браузерным движком!
К счастью, различия редко имеют значение. Если анимация CSS3 в некотором отношении дает сбой, в конечном итоге должны быть достигнуты начальное и конечное состояния. В худшем случае никакой анимации не будет, но она никогда не должна быть критичной для отображения контента.
В следующей части мы определим ключевые кадры и свойства анимации.