Лекция 14. Разработка анимации средствами CSS

Для создания покадровой анимации используется описание кадров с помощью @keyframes. Данное свойство — это контейнер, куда пользователь пропивывает покадровые изменения с стилях CSS. Браузер вычисляет разницу в стилях и на этом строит анимацию, плавно изменяя значение свойств в заданных пределах.

1
2
3
4
5
6
7
8
	@keyframes y1 {
		0% {
			margin-left: 5px;
		}
		100% {
			margin-left: 100px;
		}
	}

При данном коде в начале анимации элементу будет присвоей стиль margin-left: 5px, а конечным значением будет margin-left: 100px.

Для того, чтобы анимация сработала, необходимо ее присвоить элементу, который требует анимирования. Существует две формы записи анимации, сокращенная:

1
2
3
	.one {
		animation: y1 4s 3;
	}
здесь
  • animation— ключевое слово
  • y1 — название анимации
  • 4s — продолжительность анимации( 4 секунды)
  • 3 — количество повторений

Полная форма записи анимации выглядит так:

1
2
3
4
5
	.one {
		animation-name: y1;
		animation-duration: 4s;
		animation-iteration-count: 3
	}
Как вы догадались, анимироваться будут элементы, которым присвоен класс .one.

Параметры анимации

Рассмотрим значения параметров анимации поподробнее:

  • @keyframes — блок, в который записывается раскадровка анимации.
  • animation — свойство, которое позволяет в сокращенной форме записывать параметры анимации.
  • animation-name — имя блока @keyframes анимации
  • animation-duration — длительность анимации в секундах.
  • animation-timing-function — функция изменения параметров. По умолчанию имеет значение ease.
  • animation-delay — временная задержка перед выполнением анимации.
  • animation-iteration-count — количество циклов анимации, которые будут проиграны. Если установить infinite — то анимация будет бесконечной.
  • animation-direction — направление анимации. Можно задавать alternate направления для четных и нечетных итераций будет отличаться. По умолчанию стоит значение normal.

О раскадровке

С помощью директивы @keyframes можно задавать подробную раскадровку анимации:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	@keyframes y1 {
		0% {
			margin-left: 5px;
		}
		2% {
 
		}
		67% {
 
		}
		100% {
			margin-left: 100px;
		}
	}
или использовать сокращенную запись, которая указывает начальную точку анимации: from и конечную to
1
2
3
4
5
6
7
8
	@keyframes y1 {
		from{
			margin-left: 5px;
		}
		to{
			margin-left: 100px;
		}
	}

animation-timing-function

Скорость изменения параметров, которые можно задать:

  • linear — скорость изменений одинакова на всем протяжении анимации
  • ease — значение по умолчанию. Медленный старт, ускорение и замедление перед окончанием.
  • ease-in — анимация с медленным изменением параметров в начале работы.
  • ease-out — анимация с медленным изменением параметров на финише.
  • ease-in-out— медленный старт и окончание анимации.
  • cubic-bezier(n,n,n,n) — задание своих значений кривой изменения скорости. Параметр n — число от 0 до 1.
  • initial — установить значение по умолчанию
  • inherit — наследовать функцию от родителя.

Выполнить

Задание 1.Скачайте архив. Распакуйте архив. Используя вложенный index.html, создайте style.css и запишите стили элементам так, чтобы результат стал похож на тот, что изображен на рисунке. Анимируйте облака, корабль, солнце, комету и воду.