CSS анимация @keyframes + 7 примеров

Приветствую, друзья! Сегодня разберем css анимацию с использованием правила @keyframes

CSS правило @keyframes

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

Структура:

@keyframes [название] {
	[шаг]: {
		[стили]
	}
	[шаг]: {
		[стили]
	}
...
}

Пример:

	@keyframes scaling {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.5);
		}
		100% {
			transform: scale(2);
		}
}

В первой строчке, после ключевого слова @keyframes идёт название анимации, scaling, к ней мы будем обращаться далее.

После объявления прописываются "шаги анимации" - кадры, в % от всей длительности анимации. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 30%, 75% или даже 94%.

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

	animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Это сокращённая форма записи, описание каждого свойства ниже:

Пример:

	animation: animationname 3s linear 2s infinite reverse

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

Переходим к примерам

Бесконечная анимация

	@keyframes moving {
	0% {
		transform: translate(0, 0);
}
	30% {
		transform: translate(50px, 0);
	}
	60% {
		transform: translate(50px, 50px);
	}
	100% {
		transform: translate(0, 50px);
	}
}

div {
	width: 50px;
	height: 50px;
	background-color: #3debff;
	animation: moving 2s infinite;
}

В данном примере значение infinite задает проигрывание анимации от начала до конца, и затем в обратном направлении

Остановка анимации

	@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);
	}
}

div {
	animation: turning 1s infinite alternate;
}

div:hover {
	animation-play-state: paused;
}

Здесь проигрывание анимации прирывается как только пользователь навел мышь на элемент, это происходит за счет установки animation-play-state: paused;

Пошаговая анимация

@keyframes steps {
	10% {
		transform: translate(60px, 0);
	}
	20% {
		transform: translate(120px, 60px);
	}
	30% {
		transform: translate(180px, -60px);
	}
	40% {
		transform: translate(240px, 0);
	}
	50% {
		transform: translate(300px, 60px);
	}
	60% {
		transform: translate(360px, -60px);
	}
	70% {
		transform: translate(420px, -120px);
	}
	80% {
		transform: translate(480px, 60px);
	}
	90% {
		transform: translate(540px, 0);
	}
}

div {
	animation: steps 5s infinite step-end;
}

Пошаговая анимация задается параметром animation-timing-function со значением step-end

Выполнение анимации в обратную сторону

@keyframes moving {
	0% {
		transform: translate(0, 0);
	}
	30% {
		transform: translate(70px, 0);
	}
	60% {
		transform: translate(140px, 0);
	}
	100% {
		transform: translate(200px, 0);
	}
}

div:first-child {
	animation: moving 2s ease-out 1s infinite normal;
}
div:last-child {
	animation: moving 2s ease-out 1s infinite reverse;
}

Направление анимации задается свойством animation-direction. normal - обычное направление, reverse - выполнение в обратную сторону, alternate - от начала до конца и обратно, alternate-reverse - от конца в начало и обратно.

Задержка анимации перед началом воспроизведения

@keyframes moving {
	0% {
		transform: translate(0, 0);
	}
	30% {
		transform: translate(70px, 0);
	}
	60% {
		transform: translate(140px, 0);
	}
	100% {
		transform: translate(200px, 0);
	}
}

div:nth-child(1) {
	animation: moving 2s ease-out 0s infinite alternate;
}
div:nth-child(2) {
	animation: moving 2s ease-out 5s infinite alternate;
}
div:nth-child(3) {
	animation: moving 2s ease-out -1s infinite alternate;
}

За задержку перед началом анимации отвечает свойство animation-delay (s). В случае нескольких анимаций время для каждой из них можно задать через запятую.

Воздействие на элемент вне времени анимации

@keyframes timing {
  0% {
    	left: 1em;
    }
  100% {
    	left: 10em;
    	margin-left: 8em;
    }
}

div {
	animation: timing 5s;
}

div:nth-child(1) {
	animation-fill-mode: none;
}
div:nth-child(2) {
	animation-fill-mode: forwards;
}
div:nth-child(3) {
	animation-fill-mode: backwards;
}
div:nth-child(4) {
	animation-fill-mode: both;
}

С помощью свойства animation-fill-mode можно определить будет ли анимация воздействовать на элемент вне времени воспроизведения анимации (до начала или после окончания).

Значения:

• none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.
• forwards — анимация воздействует на элемент по окончании воспроизведения.
• backwards — анимация воздействует на элемент до начала воспроизведения.
• both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

В данном уроке мы разобрали создание css анимации с использованием блока @keyframes и все возможные варианты и настройки.