CSS анимация для самых маленьких

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

Результат урока: Смотреть

Материалы урока

• Исходники: Скачать
• Базовый пример из урока: codepen.io/agragregra/pen/PKNavm
• Стартовый шаблон из урока: github.com/agragregra/optimizedhtml-start-template

Внимание! При написании Sass-кода, с выходом новой версии Sass, следует подключить модуль math в САМОМ начале Sass-файла.
Например:

//Неправильно:
margin-top: -$box_h/2

// Правильно:
margin-top: math.div(-$box-h, 2)

Немного теории

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

Если у вас уже был опыт создания анимаций в каких-либо приложениях, таких, как Adobe After Effects или престарелый Flash Professional (ныне Adobe Animate), то вам должны быть знакомы такие понятия, как «Ключевые кадры», «Временные функции или динамика движения», которые, как и в любой другой сфере анимации применимы и к анимации элементов на странице посредством CSS. Однако, в отличие от работы с интерфейсами приложений, вы создаете вашу CSS анимацию посредством написания кода в редакторе.

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

Для рассмотрения теории и основ мы будет использовать чистый CSS, а в дальнейшем, уже на более сложном примере подключим использование Sass препроцессора. Подробнее узнать о Sass вы можете в уроке «Sass для самых маленьких - Подробное руководство». Кроме того, для более глубокого понимания основ CSS, также рекомендую ознакомиться с уроками «Основы CSS - Руководство для самых маленьких» и «Все CSS селекторы в одном уроке»

See the Pen Animation CSS Base Example by Алексей (@agragregra) on CodePen.

Давайте рассмотрим структуру @keyframes и работу с ключевыми кадрами на простом примере:

@keyframes turning {
	0% {
		border-radius: 0 0 0 0;
		transform: rotate(0deg);
	}
	25% {
		border-radius: 50% 0 0 0;
		transform: rotate(45deg);
	}
	50% {
		border-radius: 50% 50% 0 0;
		transform: rotate(90deg);
	}
	75% {
		border-radius: 50% 50% 50% 0;
		transform: rotate(135deg);
	}
	100% {
		border-radius: 50% 50% 50% 50%;
		transform: rotate(180deg);
	}
}

В первой строчке мы видим, что после ключевого слова @keyframes идет его название « turning». Это и есть наименование блока кеймфреймов, к которому мы будем обращаться далее.

После объявления открывается фигурная скобка (в данном примере на чистом CSS), в которой последовательно от 0% до 100% прописываются свойства для каждого ключевого кадра. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 50%, 75% или даже 83%. Это очень похоже на таймлайн приложения для создания анимации, где между двумя состояниями можно добавить любое промежуточное.

Далее этот блок кода с ключевыми кадрами можно применить к любому CSS селектору, но чаще всего они готовятся для конкретного селектора, если мы хотим добиться определенного поведения именно от нужного блока.

Обращение к блоку ключевых кадров

После того, как мы задали ключевые кадры для объекта (в жизни это делается параллельно или даже после обращения к блоку с ключевыми кадрами), можно обратиться к нашему новоиспеченному блоку. Давайте посмотрим на следующий простой код из примера выше:

div {
	width: 120px;
	height: 120px;
	background-color: violet;
	margin: 100px;
	animation: turning 2s ease-out 1s infinite alternate;
}

Ничего особенного до последней строчки. Здесь мы определяем то, как будет выглядеть объект изначально и в последней строчке блока обращаемся к блоку ключевых кадров с наименованием «turning»:

animation: turning 2s ease-out 1s infinite alternate;

Если с определением ключевых кадров все относительно понятно, то данная строчка нуждается в немедленном объяснении. Как мы видим, сначала идет CSS свойство «animation». Это сокращенная форма записи, как например, свойство «margin: 20px 30px 40px 50px», которое можно разделить на несколько отдельных свойств:

margin-top: 20px
margin-right: 30px
margin-bottom: 40px
margin-left: 50px

По данной аналогии, составное свойство «animation» можно разделить на несколько отдельных свойств:

animation-name	Название анимации, к которому происходит обращение из @keyframes
animation-duration	Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms)
animation-timing-function	Временная функция, динамика движения объекта или изменения свойства (ease - (по умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear - анимация происходит равномерно; ease-in - начинается медленно и ускоряется к последнему ключевому кадру; ease-out - начинается быстро и плавно замедляется вконце; ease-in-out - медленно начинается и медленно заканчивается)
animation-delay	Время задержки анимации ДО старта. Также задается в секундах или миллисекундах
animation-iteration-count	Количество повторов (итерации) анимации (infinite - бесконечно, или можно задать простое число без единиц измерения)
animation-direction	Направление анимации, последовательно, вспять или «туда-обратно» (normal - (по умолчанию) анимация проигрывается от начала до конца и останавливается; alternate - проигрывается от начала до конца и в обратном направлении; alternate-reverse - проигрывается с конца до начала и обратно; reverse - анимация проигрывается с конца.)
animation-play-state	Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на :hover или из функции JS при необходимости
animation-fill-mode	Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Чаще всего опытные разработчики не пишут все эти свойства по отдельности, а используют краткую запись и структура ее такова:

animation: (1. animation-name - название) (2. animation-duration - продолжительность) (3. animation-timing-function динамика движения) (4. animation-delay - пауза перед стартом) (5. animation-iteration-count - количество выполнений) (6. animation-direction - направление)

Пример:

animation: animationname 2s linear 1s infinite reverse

Из примера мы видим, что мы обращаемся к блоку @keyframes animationname, задаем продолжительность выполнения анимации 2 секунды, динамика линейная, пауза перед запуском составляет 1 секунду, повторяется анимация бесконечно и выполняется в обратную сторону.

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

Однако, большинство этих свойств можно опустить, так как чаще всего их значения по умолчанию вполне удовлетворят большинство задач по созданию анимации. Какие-то из них можно не писать, однако оставшиеся следует указывать в той последовательности, которую мы рассмотрели ранее. Вообще, для функционирования вашей анимации достаточно всего два параметра в вашем составном свойстве - название (animation-name) и продолжительность (animation-duration).