CSS анимация @keyframes

CSS анимация @keyframes

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

CSS правило @keyframes

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

Структура:

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

Пример:

  • Результат
  • 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 секунды, анимация повторяется бесконечно и выполняется в обратную сторону.

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

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

  • Результат
  • 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 задает проигрывание анимации от начала до конца, и затем в обратном направлении

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

  • Результат
  • 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;

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

  • Результат
  • 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

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

  • Результат
  • 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 - от конца в начало и обратно.

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

  • Результат
  • 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). В случае нескольких анимаций время для каждой из них можно задать через запятую.

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

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


Перейти на главную страницу