Эффект раскачивания изображений

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Использование анимации ключевых кадров в CSS3 позволяет контролировать точный стиль элемента в любой момент времени. Здесь используются ключевые кадры, чтобы создать эффект качающейся картинки, который появляется примерно каждые 5 секунд.

Искомое действие происходит с помощью свойства анимации:

animation: swinging 10s ease-in-out 0s infinite;

А сам эффект качания определяется с помощью CSS ключевых кадров:

@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}

В демо-примере Вы увидите, что между каждой фазой раскачивания есть пауза. Другими словами, каждый элемент не качается все время. Это удаётся сделать изменяя регулировки стилей, в данном случае, делается отметка 50%, то есть достигается возможность состояния покоя в течении половины срока. Создается иллюзия паузы в анимации. Можно посчитать, что каждая активная фаза эффекта длится 5 секунд (50% от 10 секунд) и столько же длится состояние покоя. Вы можете настроить это соотношение по своему вкусу.

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

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

2. А этот код скопируйте и расположите в разделе body:

<img class="swing" src="img/1.jpg"> 

<br>
<img class="swing" src="img/2.jpg" style="
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;"> 

<br>
<img class="swing" src="img/3.jpg" style="
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;"> 

<br>
<img class="swing" src="img/4.jpg" style="
	animation-delay: 0.7s;
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	animation-delay: 0.7s;"> 	
	
	
<br>	
<img class="swing" src="img/5.jpg" style="
	animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;"> 	
	

Сохраните любые пять изображений из демо-примера в папку img, которая должна находиться в одной директории с файлом вашей страницы, проверьте корректность работы эффекта, добавьте при желании и замените изображения на свои.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.