Введение в CSS-анимацию

Введение в CSS-анимацию

От автора: этот пост предназначен для людей, которые никогда не играли с красным квадратом в CSS.

Собственно говоря, вот красный квадрат:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Без лишних слов, приступим.

CSS переходы

Анимация в CSS выполняется с помощью transitions и animations. Переходы используются для менее сложных анимаций, в основном для перехода от одного этапа к другому — отсюда и название.

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

Без перехода получаем:

Введение в CSS-анимацию

Теперь добавим анимацию. У переходов есть 4 свойства: transition-property, transition-duration, transition-timing-function, transition-delay.

transition-property: принимает имя свойств CSS, к которым вы хотите добавить эффект перехода, например, transform, color, width. Значение по умолчанию — all, что означает анимацию всех свойств.

Давайте зададим для transition-property background-color, чтобы обнаружить изменения в цвете фона для нашего блока.

Чтобы анимировать несколько свойств, разделите их запятыми:

Или с помощью ключевого слова all:

transition-duration: принимает продолжительность перехода в секундах (с) или миллисекундах (мс). По умолчанию 0 с. Поэтому нам нужно изменить это, чтобы запустить переход.

Давайте добавим transition-duration 2.5s.

Получаем вот что:

Введение в CSS-анимацию

transition-timing-function: используется для выбора типа используемой кривой скорости. По умолчанию — ease (медленно в начале, затем быстро, затем медленно в конце). Также есть linear, ease-in, ease-in-out, ease-out. И вы также можете создать свою собственную кривую с помощью кубической функции Безье (но это выходит за рамки данного руководства).

Сравнение разных значений transition-timing-function. Давайте зададим для нашего блока linear.

Введение в CSS-анимацию

Давайте установим для нашего бокса линейную функцию перехода.

transition-delay: добавляет задержку перед началом перехода. По умолчанию — 0 с. Давайте введем transition-delay 2s.

Получаем вот это:

Введение в CSS-анимацию

Подводя итог, мы задаем изменяемые css-свойства через transition-property. При обнаружении изменений этих свойств будет воспроизведен переход от старых значений к новым. Мы устанавливаем, как долго он будет выполняться с помощью transition-duration. Мы можем настроить кривую скорости анимации с помощью transition-timing-function и добавить задержку с помощью transition-delay.

Сокращение для этих 4-х свойств: transition.

Свойство transition

Свойство transition является обобщающим для transition-property, transition-duration, transition-timing-function, transition-delay в таком порядке:

Примечание: Несмотря на то, по умолчанию transition-property имеет значение all, большинство разработчиков пишут all. Например, transition: all 2s; вместо transition: 2s;.

Заменив четыре свойства перехода для box на transition, мы получим:

Что, если бы мы также захотели повернуть этот блок? Мы можем добавить эффект поворота при наведении, давайте добавим поворот на 180 градусов:

И изменим свойство перехода transition на all:

Поворот по умолчанию — 0 градусов, поэтому переход обнаружит изменение и анимирует его:

Введение в CSS-анимацию

Если нам нужен другой переход background-color, мы не можем использовать all. Нам нужно добавить background-color и transform, разделенные запятой:

Мы получили:

Введение в CSS-анимацию

Примечание: нам не нужно указывать все свойства перехода. Мы можем пропустить те, которые не будем менять. Примеры:

transition: transform 0.3s;=> переход при изменении трансформации длительностью 0,3 с. По умолчанию для transition-timing-function задано значение ease, а для transition-delay — 0 с.

transition: width 5s 1s; => переход при изменении ширины продолжительностью 5 с и с задержкой перехода 1 с.

transition: 0.5s; => переход на изменение всех свойств за 0,5 с.

transition: all 1s linear; => переход для всех свойств изменяется в течение 1 секунды, а для transition-timing-function установлено на linear.

На этом мы завершаем наше небольшое введение в переходы. Теперь давайте рассмотрим другой способ анимации в CSS.

CSS анимация

Анимации с помощью ключевых кадров больше подходит для сложных изменений. Доступно 7 свойств: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.

animation-name принимает имя ключевого кадра. @keyframes — это правило CSS, которое контролирует шаги анимации. Базовый синтаксис:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

fadeIn произвольное имя, которое мы задали ключевым кадрам.

Эти ключевые кадры будут анимировать непрозрачность от 0, когда анимация начинается, до 1, когда анимация заканчивается.

Совет: некоторые предпочитают использовать синтаксис from / to:

Вышеуказанное делает то же самое, от <=> 0% до <=> 100%. С помощью ключевых кадров мы можем:

определить столько ключевых кадров, сколько мы хотим от 0 до 100%.

анимировать столько свойств, сколько хотим.

и нет необходимости иметь одинаковые свойства для каждого ключевого кадра.

пропустить 0 или 100% — хотя это не рекомендуется из-за проблем совместимости.

Анимируя эти keyFrames, мы получаем:

Введение в CSS-анимацию

Мы анимируем цвет фона красного прямоугольника в цвета радуги:

Теперь, чтобы добавить эту анимацию в наш блок, мы добавим animation-name и установим для него имя ключевых кадров:

Аналогично переходам у нас есть: animation-duration, которое устанавливает продолжительность анимации. По умолчанию — 0 с. Мы зададим длительность 5 секунд:

animation-timing-function, которое устанавливает кривую скорости анимации. По умолчанию — ease. Давайте добавим animation-timing-function:

animation-delay, которое устанавливает начальную задержку. По умолчанию — 0 с. Давайте добавим задержку в 1 секунду:

Мы получили:

Введение в CSS-анимацию

Обратите внимание, как цвет фона блока снова становится красными после окончания анимации.

Последние три относятся к анимации: animation-iteration-count устанавливает количество раз, которое мы хотим воспроизвести анимацию. По умолчанию 1. Мы можем заставить анимацию работать бесконечно, установив для этого свойства значение infinite. Выберем запускать 3 раза:

animation-direction устанавливает, как мы хотим воспроизводить анимацию. Возможные значения: normal, reverse, alternate и alternate-reverse.

normal начинается с 1-го ключевого кадра.

reverse начинается с последнего ключевого кадра.

alternate запуск начинается с 1-го ключевого кадра, но если анимация повторяется, следующая анимация пойдет в обратном направлении.

alternate-reverse — то же самое, что и alternate, за исключением того, что начинается с последнего ключевого кадра.

Вот пример от w3schools. По умолчанию значение normal. Мы собираемся выбрать alternate.

animation-fill-mode определяет стиль элемента, когда анимация не воспроизводится. Его можно задать forwards, чтобы принимать значения последнего ключевого кадра. Или backwards, чтобы принимать значения первого ключевого кадра. Или both. По умолчанию none.

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

Давайте добавим режим forwards для заливки:

Введение в CSS-анимацию

В 1-й анимации изменения начинаются с красного и заканчиваются фиолетовым.

Во второй анимации изменения происходят в обратном направлении, потому что мы задали alternate, поэтому анимация начинается с фиолетового цвета и заканчивается красным.

В 3-й анимации изменения снова происходят в обратном направлении, поэтому анимация начинается с красного и заканчивается фиолетовым. Цвет фона не возвращается к красному после завершения анимации, потому что мы установили режим forwards.

Подводя итог, мы используем @keyframes для настройки анимации. Мы обращаемся к этим ключевым кадрам, ссылаясь на их имя в animation-name. Мы устанавливаем animation-duration. Мы можем настроить кривую скорости анимации с помощью animation-timing-function и добавить задержку с помощью animation-delay.

Мы также можем указать количество раз, которое хотим запускать анимацию, с помощью animation-iteration-count, изменить animation-direction, чтобы выбрать направление прохождения ключевых кадров, и animation-fill-mode, чтобы изменить стиль элемента анимации после анимации.

Доступно сокращение для этих 7 свойств: animation.

Свойство animation

Свойство animation является обобщающим для animation-name, animation-duration, animation-timing-function, animation-delay*, animation-iteration-count, **animation-direction, **animation-fill-mode* в таком порядке:

animation: name duration timing-function delay iteration-count direction fill-mode;

Значения по умолчанию такие же: animation: none 0 ease 0 1 normal none.

Заменив 7 свойств анимации на animation, мы получим:

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

animation: fadeIn 0.5s;=> запускает анимацию @keyframes с именем fadeIn в течение 0,5 с. По умолчанию для timing-function задано ease, для delay — 0s, для iteration-count — 1, для direction — normal и для fill-mode — none.

animation: grow 2s forwards; => запускает анимацию @keyframes с именем grow на 2s, будет установлен fill-mode forwards, чтобы сохранить конечное состояние.

animation: yoyo 0.3s infinite alternate; => запускает анимацию @keyframes с именем yoyo на 0,3 с бесконечным повторением и изменяемым направлением.

На этом мы закончим наше небольшое введение в анимацию по ключевым кадрам.

Заключение

Не каждое свойство можно анимировать. Например, вы не можете анимировать изменение display с inline на block. Если сомневаетесь, проверьте этот список анимируемых свойств на MDN.

Будьте осторожны с тем, что вы анимируете. Это отстой, но мобильные телефоны, на которых можно нормально играть в новейшие игры, могут не поддерживать простую анимацию. transform и opacity получают ускорение от процессора на мобильных устройствах. Поэтому вместо изменения размера шрифта используйте transform: scale(); и вместо изменения left, right, top, bottom используйте transform: translateY() и transform: translateX().

Я пропустил steps для transition-timing-function и animation-play-state, которые не очень хорошо поддерживается, это выходит за рамки данного руководства.

Спасибо за прочтение!

Автор: ljc-dev

Источник: //dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.