УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Анимация CSS3. Создание баннеров

Авторы учебного курса:
Арефьева Анастасия Александровна,
студентка гр. ЗКТ-402С РГППУ, выпуск 2019 г.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ




Урок 2. Вращающийся прыгающий шар

Цель: cоздать при помощи правила @keyframes и свойств анимации прыгающий шар.

Задача: изучить правило для создания ключевых кадров @keyframes.


CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации элементов. И в даном уроке мы расмотрим с вами основные свойства. В результате работы, у вас должен получится прыгающий шар, который вы можете видеть на рисунке 1.

Рисунок 1

Задание №1.Создание файла

1. Создайте html файл.

2. В данном файле создайте 2 блока div.
В первом блоке div будет сам контейнер, внутри которого будет прыгать наш шар. Во втором блоке будет размещаться сам шар. Каждому присвойте классы.
Для первого блока пусть класс будет - vnutri а для второго - shar. Код на рисунке ниже.

Рисунок 2

Задание №2. Создание стилей

1. Создайте основные стили для наших блоков - vnutri и shar.
Ширину и высоту блока vnutri укажите 700 и 300 пикселей. При желании можете задать фон, в нашем случае мы этого делать не будем.
Так же укажите жирную рамку в размере двух пикселей, это будет наш «пол».
Укажите позиционирование - relative. Код на рисунке ниже.

Рисунок 3

2. Для нашего второго блока, где будет наш шар, задайте следующие стили:

  • ширина и длина будет 50 пикселей;
  • шар будет залит градиентом от темно-синего до черного;
  • укажите border-radius, что бы был не квадрат, а круг;
  • позиционирование элемента будет - absolute.

Рисунок 4

Таким образом мы создали статичный шар. Результат можете увидеть на рисунке 5.

Рисунок 5

Задание №3. Добавление свойств анимации

Перед добавлением ключевых кадров укажем в нашем стиле shar некоторые свойства для анимации.
Ниже вы можете увидеть какие свойства отвечают за анимацию.

– animation-name — уникальное имя анимации (ключевых кадров, их мы укажем позднее);
– animation-duration — длительность анимации в секундах;
animation-timing-function — кривая изменения скорости анимации. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n). В Нашем случае мы будем использовать значение - linear;
– animation-delay — задержка в секундах перед началом анимации;
– animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.

Примечание: Так же все эти значения можно указывать через пробел и используя лишь одно свойство - animation. В нашем уроке мы поступим именно так. Главное помнить, что указывать нужно все по порядку.

1. В нашем стиле shar добавьте свойство animation. В нем укажите название - в нашем случае это будет share.
Далее укажите продолжительность анимации 3 секунды (столько будет длиться движение шара вверх-вниз).
Кривая изменения скорости будет - linear (анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.), вы можете поэксперементировать и выбрать вариант, котрый будет выглядеть более естественно.
Так же наша анимация будет идти бесконечно.
Описание данного стиля вы можете увидеть в листинге ниже.

Рисунок 6

2. Добавление анимации.

Добавим сразу свойства анимации для движения шара влево-вправо.
Укажите через запятую в том же стиле название shareleft, длительностью 24 секунду, с кривой изменения скорости linear, что бы повторялось бесконечно, а так же укажите направление анимации alternate (рисунок 7).

Рисунок 7

Задание №4. Добавление ключевых кадров

Кадры определяют на каком шаге, какие свойства будут анимированы. Анимация создается путем постепенного перехода от одного набора стилей CSS к другому. Изменение стиля будет происходить в процентах, или с ключевыми словами «from» и «to»: 0% это начало анимации, 100%, когда анимация завершена.

Синтаксис - @keyframes название_анимации {селектор-ключевого-кадра {css-стили;} }
Название анимации обязательно. В нашем уроке мы задавали название выше. Селекторы так же явлются обязательными, указывается в процентах от продолжительности анимации. Стили так же являются обязательными элементами, иначе незачем применять правило.

1. Добавим ключевые кадры для анимациии - share.

Для первого и последнего кадра (0% и 100%) пропишем свойство bottom:100%. Это означает что начинаться наша анимация будет сверху и заканчиваться там же.

Теперь добавим дополнительные кадры для плавного движения шара. У нас это будут кадры 25%, 30% и 35%, данные кадры мы создаем для того что бы было ощущение реального шара, то что он ударяется о поверхность. На 20 и 35 укажем значение bottom:10px. А на 30% укажем bottom:0, а так же уменьшим высоту в два раза и изменим цвет. В данном кадре наш шар будет ударяться о рамку снизу и сплющиваться, а потом к 35% обратно растягиваться.

Добавим в стили дополнительных кадров вращение на 360%. Листинг кода данного задания вы можете увидеть ниже.

Рисунок 8

Теперь наш шар прыгает вверх-вниз (рисунок 9). Осталось добавить движение влево-вправо.

Рисунок 9

2. Добавим ключевый кадры, чтобы наш шар так же двигался влево-вправо. Это просто. Достаточно в начальном ключевом кадре поставить значение left:0% и в конечном кадре поставить left:0% (рисунок 10).

Рисунок 10

Всё, наш прыгаюший шар готов. Проверьте результат, он должен совпадать с тем, что показан в начале урока. Сохраните результат работы под своим именем.

Контрольное задание

В нижеприведенных примерах изучите коды. Создайте свой пример, отличающийся от данных, с другой траекторией движения шариков.

Пример 1

html-код

<div class="var1_kontr">
	<div class="shar1_var1"></div>
	<div class="shar2_var1"></div>
	<div class="shar3_var1"></div>
	<div class="shar4_var1"></div>
	<div class="shar5_var1"></div>	
	<div class="shar6_var1"></div>
	<div class="shar7_var1"></div>
</div>

css-код

.var1_kontr {
	width: 250px;
	height: 200px;
	border-bottom: solid 2px;
	position: relative;
}

.shar1_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #5cabff, #000);
	border-radius: 100%;
	animation: share1_var1 3s linear infinite;
}
@keyframes share1_var1 {
	0%{bottom: 0%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}	
}

.shar2_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  yellow, #000);
	border-radius: 100%;
	animation: share2_var1 3s linear infinite;
}
@keyframes share2_var1 {
	0%{bottom: 0%; left: 15%;}
	50%{transform: rotate(360deg); bottom: 100%; left:75%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:15%; width: 25px; height: 25px;}	
}

.shar3_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  green, #000);
	border-radius: 100%;
	animation: share3_var1 3s linear infinite;
}
@keyframes share3_var1 {
	0%{bottom: 0%; left: 30%;}
	50%{transform: rotate(360deg); bottom: 100%; left:60%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:30%; width: 25px; height: 25px;}	
}

.shar4_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  red, #000);
	border-radius: 100%;
	animation: share4_var1 3s linear infinite;
}
@keyframes share4_var1 {
	0%{bottom: 0%; left: 45%;}
	50%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}	
}

.shar5_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  purple, #000);
	border-radius: 100%;
	animation: share5_var1 3s linear infinite;
}
@keyframes share5_var1 {
	0%{bottom: 0%; left: 60%;}
	50%{transform: rotate(360deg); bottom: 100%; left:30%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:60%; width: 25px; height: 25px;}	
}

.shar6_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  blue, #000);
	border-radius: 100%;
	animation: share6_var1 3s linear infinite;
}
@keyframes share6_var1 {
	0%{bottom: 0%; left: 75%;}
	50%{transform: rotate(360deg); bottom: 100%; left:15%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:75%; width: 25px; height: 25px;}	
}

.shar7_var1 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #fff, #000);
	border-radius: 100%;
	animation: share7_var1 3s linear infinite;
}
@keyframes share7_var1 {
	0%{bottom: 0%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
}


Пример 2

html-код

<div class="var2_kontr">
	<div class="shar1_var2"></div>
	<div class="shar2_var2"></div>
	<div class="shar3_var2"></div>
	<div class="shar4_var2"></div>
	<div class="shar5_var2"></div>
	<div class="shar6_var2"></div>
	<div class="shar7_var2"></div>
	<div class="shar8_var2"></div>
</div>

css-код

.var2_kontr {
	width: 250px;
	height: 220px;
	position: relative;
}

.shar1_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #fff, #000);
	border-radius: 100%;
	animation: share1_var2 3s linear infinite;
}
@keyframes share1_var2 {
	0%{bottom: 0%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}	
}

.shar2_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  yellow, #000);
	border-radius: 100%;
	animation: share2_var2 3s linear infinite;
}
@keyframes share2_var2 {
	0%{bottom: 50%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}	
}

.shar3_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  green, #000);
	border-radius: 100%;
	animation: share3_var2 3s linear infinite;
}
@keyframes share3_var2 {
	0%{bottom: 50%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}	
}

.shar4_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  red, #000);
	border-radius: 100%;
	animation: share4_var2 3s linear infinite;
}
@keyframes share4_var2 {
	0%{bottom: 0%; left: 45%;}
	50%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}	
}

.shar5_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  purple, #000);
	border-radius: 100%;
	animation: share5_var2 3s linear infinite;
}
@keyframes share5_var2 {
	0%{bottom: 100%; left: 45%;}
	50%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}	
}

.shar6_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  blue, #000);
	border-radius: 100%;
	animation: share6_var2 3s linear infinite;
}
@keyframes share6_var2 {
	0%{bottom: 100%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}	
}

.shar7_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #5cabff, #000);
	border-radius: 100%;
	animation: share7_var2 3s linear infinite;
}
@keyframes share7_var2 {
	0%{bottom: 0%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
}

.shar8_var2 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  pink, #000);
	border-radius: 100%;
	animation: share8_var2 3s linear infinite;
}
@keyframes share8_var2 {
	0%{bottom: 100%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}	
}
	

Пример 3

html-код

<div class="var3_kontr">
	<div class="shar1_var3"></div>
	<div class="shar2_var3"></div>
	<div class="shar3_var3"></div>
	<div class="shar4_var3"></div>
	<div class="shar5_var3"></div>
	<div class="shar6_var3"></div>
	<div class="shar7_var3"></div>
	<div class="shar8_var3"></div>
</div>

css-код

.var3_kontr {
	width: 250px;
	height: 200px;
	border-bottom: solid 2px;
	position: relative;
}

.shar1_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #fff, #000);
	border-radius: 100%;
	animation: share1_var3 3s linear infinite;
}
@keyframes share1_var3 {
	0%{bottom: 0%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}	
}

.shar4_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  red, #000);
	border-radius: 100%;
	animation: share4_var3 3s linear infinite;
}
@keyframes share4_var3 {
	0%{bottom: 0%; left: 45%;}
	50%{transform: rotate(360deg); bottom: 50%; left:45%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}	
}

.shar7_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #5cabff, #000);
	border-radius: 100%;
	animation: share7_var3 3s linear infinite;
}
@keyframes share7_var3 {
	0%{bottom: 0%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
}

.shar2_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  yellow, #000);
	border-radius: 100%;
	animation: share2_var3 3s linear infinite;
}
@keyframes share2_var3 {
	0%{bottom: 50%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}	
}

.shar3_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  green, #000);
	border-radius: 100%;
	animation: share3_var3 3s linear infinite;
}
@keyframes share3_var3 {
	0%{bottom: 50%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}	
}

.shar5_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  purple, #000);
	border-radius: 100%;
	animation: share5_var3 3s linear infinite;
}
@keyframes share5_var3 {
	0%{bottom: 100%; left: 45%;}
	50%{transform: rotate(360deg); bottom: 50%; left:45%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}	
}

.shar6_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  blue, #000);
	border-radius: 100%;
	animation: share6_var3 3s linear infinite;
}
@keyframes share6_var3 {
	0%{bottom: 100%; left: 90%;}
	50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}	
}

.shar8_var3 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  pink, #000);
	border-radius: 100%;
	animation: share8_var3 3s linear infinite;
}
@keyframes share8_var3 {
	0%{bottom: 100%; left: 0%;}
	50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}	
}	


Пример 4

html-код

<div class="var4_kontr">
	<div class="var4_kontr">
	<div class="shar1_var4"></div>
	<div class="shar2_var4"></div>
	<div class="shar3_var4"></div>
	<div class="shar4_var4"></div>
	<div class="shar5_var4"></div>
	<div class="shar6_var4"></div>
	<div class="shar7_var4"></div>
	<div class="shar8_var4"></div>
</div>

css-код

.var4_kontr {
	width: 250px;
	height: 200px;
	border: solid 1px;
	position: relative;
}

.shar1_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #fff, #000);
	border-radius: 100%;
	animation: share1_var4 4s linear infinite;
}
@keyframes share1_var4 {
	0%{bottom: 0%; left: 0%;}
	25%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
	50%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}	
	75%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}	
}

.shar2_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  yellow, #000);
	border-radius: 100%;
	animation: share2_var4 4s linear infinite;
}
@keyframes share2_var4 {
	0%{bottom: 50%; left: 0%;}
	12%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
	37%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}	
	63%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	88%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}		
	100%{transform: rotate(360deg); bottom: 50%; left: 0%; width: 25px; height: 25px;}	
}

.shar3_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  green, #000);
	border-radius: 100%;
	animation: share3_var4 4s linear infinite;
}
@keyframes share3_var4 {
	0%{bottom: 88%; left: 0%;}
	25%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
	50%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	75%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 88%; left: 0%; width: 25px; height: 25px;}	
}

.shar4_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  red, #000);
	border-radius: 100%;
	animation: share4_var4 4s linear infinite;
}
@keyframes share4_var4 {
	0%{bottom: 88%; left: 45%;}
	12%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
	37%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	63%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}	
	88%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 88%; left:45%; width: 25px; height: 25px;}	
}

.shar5_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  purple, #000);
	border-radius: 100%;
	animation: share5_var4 4s linear infinite;
}
@keyframes share5_var4 {
	0%{bottom: 88%; left: 90%;}
	25%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
	50%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}	
	75%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 88%; left: 90%; width: 25px; height: 25px;}	
}

.shar6_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  blue, #000);
	border-radius: 100%;
	animation: share6_var4 4s linear infinite;
}
@keyframes share6_var4 {
	0%{bottom: 50%; left: 90%;}
	12%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
	37%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}	
	63%{transform: rotate(360deg); bottom: 90%; left:0%; width: 25px; height: 25px;}	
	88%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}	
}

.shar7_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #5cabff, #000);
	border-radius: 100%;
	animation: share7_var4 4s linear infinite;
}
@keyframes share7_var4 {
	0%{bottom: 0%; left: 90%;}
	25%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
	50%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}	
	75%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left: 90%; width: 25px; height: 25px;}
}

.shar8_var4 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  pink, #000);
	border-radius: 100%;
	animation: share8_var4 4s linear infinite;
}
@keyframes share8_var4 {
	0%{bottom: 0%; left: 45%;}
	12%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
	37%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}	
	63%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}	
	88%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}	
	100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}	
}
	

Пример 5

html-код

<div class="var5_kontr">
	<div class="shar1_var5"></div>
	<div class="shar2_var5"></div>
	<div class="shar3_var5"></div>
	<div class="shar4_var5"></div>
	<div class="shar5_var5"></div>
	<div class="shar6_var5"></div>
	<div class="shar7_var5"></div>
	<div class="shar8_var5"></div>
</div>

css-код

.var5_kontr {
	width: 250px;
	height: 220px;
	position: relative;
}

.shar1_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #fff, #000);
	border-radius: 100%;
	animation: share1_var5 3s linear infinite;
}
@keyframes share1_var5 {
	0%{bottom: 12%; left: 12%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 12%; left: 12%;}	
}

.shar4_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  red, #000);
	border-radius: 100%;
	animation: share4_var5 3s linear infinite;
}
@keyframes share4_var5 {
	0%{bottom: 0%; left: 45%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 0%; left:45%;}	
}

.shar7_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  #5cabff, #000);
	border-radius: 100%;
	animation: share7_var5 3s linear infinite;
}
@keyframes share7_var5 {
	0%{bottom: 12%; left: 82%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 12%; left:82%;}	
}

.shar2_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  yellow, #000);
	border-radius: 100%;
	animation: share2_var5 3s linear infinite;
}
@keyframes share2_var5 {
	0%{bottom: 50%; left: 0%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 50%; left:0%;}	
}

.shar3_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  green, #000);
	border-radius: 100%;
	animation: share3_var5 3s linear infinite;
}
@keyframes share3_var5 {
	0%{bottom: 50%; left: 90%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 50%; left:90%;}	
}

.shar5_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  purple, #000);
	border-radius: 100%;
	animation: share5_var5 3s linear infinite;
}
@keyframes share5_var5 {
	0%{bottom: 100%; left: 45%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 100%; left:45%;}	
}

.shar6_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  blue, #000);
	border-radius: 100%;
	animation: share6_var5 3s linear infinite;
}
@keyframes share6_var5 {
	0%{bottom: 85%; left: 82%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 85%; left:82%;}	
}

.shar8_var5 {
	position: absolute;
	width: 25px;
	height: 25px;
	background: radial-gradient(circle at 25px 25px,  pink, #000);
	border-radius: 100%;
	animation: share8_var5 3s linear infinite;
}
@keyframes share8_var5 {
	0%{bottom: 85%; left: 12%;}
	50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}	
	100%{transform: rotate(360deg); bottom: 85%; left:12%;}	
}