1. Главная
  2. Блог
  3. CSS анимация @keyframes + 7 примеров

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

CSS анимация @keyframes + 7 примеров
Автор
Анатолий Ахматов
На чтение
2:56 мин
Обновлено
17.08.2021

Приветствую, друзья! Сегодня разберем 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 и все возможные варианты и настройки.

Также может понравится

Как защитить Свой Сайт от Спама

Защитите свой веб-сайт от спама и от спам-ботов, атакующих ваш веб-сайт, добавив
Показать полностью...

Что за *%&?! что это значило?

Меня всегда поражает, когда люди не слышали, что 93% общения-невербальное. Очень
Показать полностью...

Использование динамических функций на Вашем Сайте

Добавление динамической функциональности-отличный способ сделать ваш сайт более
Показать полностью...

Преимущества работы с веб-агентством

Микель делится 4 совершенно разными наборами навыков, необходимыми для создания
Показать полностью...

Фундаментальный маркетинговый принцип, о котором, похоже, забывают даже опытные цифровые маркетологи

Цифровые маркетологи любят зацикливаться на показателях. Но когда они не фокусир
Показать полностью...

Что такое информационная архитектура (ИА)?

Узнайте, как информационная архитектура (IA) может помочь вам создать эффективны
Показать полностью...