CSS анимация @keyframes


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



CSS правило @keyframes

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

Структура:

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

Пример:

@keyframes scaling { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(2); } } .example__template { width: 50px; height: 50px; background-color: #3debff; } #example1 { animation: scaling 2s ease-out 1s infinite alternate; }
  • Результат
  • css
	@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-name Название анимации, к которой происходит обращение из @keyframes
animation-duration Продолжительность или выполнение анимации. Может задаваться в секундах s или миллисекундах ms
animation-timing-function Временная функция, динамика изменения свойства, подсматривать можно здесь http://htmlbook.ru/css/transition-timing-function
animation-delay Время задержки анимации До начала.
animation-iteration-count Количество повторов анимации (infinite - бесконечно, также можно задать простое число без единиц измерения)
animation-direction Направление анимации, последовательно, в обратную стороно или «туда-обратно» (normal - анимация проигрывается от начала до конца и останавливается. alternate - проигрывается от начала до конца и в обратном направлении. alternate-reverse - проигрывается с конца до начала и обратно. reverse - анимация проигрывается с конца.
animation-play-state Управление проигрыванием анимации (paused (пауза), running (запуск), ...). Можно применить на :hover или из функции JavaScript при необходимости
animation-fill-mode Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Пример:

	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); } } #example2 { min-height: 150px; } #example2 div { animation: moving 2s infinite alternate; }
  • Результат
  • css
	@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); } } #example3 { animation: turning 1s infinite alternate; } #example3:hover { animation-play-state: paused; }
  • Результат
  • css
	@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); } } #example4 { min-height: 300px; display: flex; align-items: center; } #example4 div { animation: steps 5s infinite step-end; }
  • Результат
  • css
@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); } } #example5 > div:first-of-type { animation: moving 2s ease-out 1s infinite normal; } #example5 > div:last-of-type { animation: moving 2s ease-out 1s infinite reverse; }
  • Результат
  • css

Нормальное выполение


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

@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); } } #example6 > div:nth-of-type(1) { animation: moving 2s ease-out 0s infinite alternate; } #example6 > div:nth-of-type(2) { animation: moving 2s ease-out 5s infinite alternate; } #example6 > div:nth-of-type(3) { animation: moving 2s ease-out -1s infinite alternate; }
  • Результат
  • css

Обычное выполнение


Выполнение с задержкой 5с


Выполнение с задержкой -1с

@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; } } #example7 > div { animation: timing 5s; } #example7 > div:nth-of-type(2) { animation-fill-mode: forwards; } #example7 > div:nth-of-type(3) { animation-fill-mode: backwards; } #example7 > div:nth-of-type(4) { animation-fill-mode: both; }
  • Результат
  • css

none


forwards


backwards


both

@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 и все возможные варианты и настройки.