Site icon Vavik96

CSS3. Анимация. Animations

admin

Очень полезное свойство animation (анимация) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Это свойство похоже на свойство transitions (преобразования),  с методической точки зрения, лучше сначало изучить свойство transitions (преобразования), а затем уже переходить к изучению свойства animation (анимация).

Изучение свойства animation (анимация) начнем с небольшого практического примера под названием “Вечный двигатель”.

Вечный двигатель…

Для создания анимации в CSS3 необходимо использовать правило @keyframes.

Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому.

В примере выше меняется цвет фона и положение объекта.

Теперь затронем теорию вопроса.

Таблица свойств CSS 3. Cвойство animation (анимация).
NN Свойство Гугл Хром FireFox IE Safari Opera
3 @keyframes -webkit- 16 10 -webkit- 12.1
4 animation -webkit- 16 10 -webkit- 12.1
5 animation-name -webkit- 16 10 -webkit- 12.1
6 animation-duration -webkit- 16 10 -webkit- 12.1
7 animation-timing-function -webkit- 16 10 -webkit- 12.1
8 animation-delay -webkit- 16 10 -webkit- 12.1
9 animation-iteration-count -webkit- 16 10 -webkit- 12.1
10 animation-direction -webkit- 16 10 -webkit- 12.1
11 animation-play-state -webkit- 16 10 -webkit- 12.1

В таблице ниже представлены описания всех свойств, относящихся к animation (анимация).

Свойства, относящиеся к animation (анимация).
NN Свойство Описание
1 @keyframes Спецификация анимации.
2 animation-name Определяет имя анимации в правиле @keyframes.
3 animation-duration Определяет продолжительность анимации в секундах или миллисекундах. По умолчанию 0.
4 animation-timing-function Определяет каким способом будет проведен один цикл анимации. По умолчанию “ease”.
5 animation-delay Определяет задержку перед стартом анимации в секундах. По умолчанию 0.
6 animation-iteration-count Определяет количество анимационных прогонов. По умолчанию 1.
7 animation-direction Определяет, должна ли анимация проходить в обратном порядке. По умолчанию “normal”.
8 animation-play-state Определяет состояние анимации (“running”, “paused”). По умолчанию “running”.

Для получения анимации необходимо сделать привязку, определив по меньшей мере два анимационных свойства:

Анимация – это эффект, который позволяет объекту постепенно менять стиль с одного на другой.

Можно менять сколько угодно стилей, сколько угодно раз.

Определить, когда изменения должны произойти можно с помощью значений в процентах или используя ключевые слова “from” и “to”, что является синонимами для 0% и 100% соответственно.

0% – это начало анимации, 100% – когда анимация заканчивается.

Гораздо лучше использовать селекторы 0% и 100% (а не “from” и “to”), т.к. браузеры лучше понимают именно формат 0% и 100%.

Рассмотрим классы объекта, чтобы совсем все стало понятно.

.sample_052 {
	width:200px;
	height:50px;
	background:red;
	position:relative;
	animation-name:for_sample_052;
	animation-duration:12s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
/*	animation-direction:alternate; */
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:for_sample_052;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
/*	-webkit-animation-direction:alternate; */
	-webkit-animation-play-state:running;
	opacity:0.8;
	padding:10px;
	margin:10px;
	text-align:center;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
	
}

Правило @keyframes определено так:

@keyframes for_sample_052 {
	0%  {background:red; color:yellow; left:0px; top:0px;}
	40%  {background:yellow; color:blue; left:500px; top:0px;}
	50%  {background:blue; color:green; left:500px; top:100px;}
	90%  {background:green; color:red; left:0px; top:100px;}
	100% {background:red; color:black; left:0px; top:0px;}
}

@-webkit-keyframes for_sample_052 /* Safari and Chrome */ {
	0%  {background:red; color:yellow; left:0px; top:0px;}
	40%  {background:yellow; color:blue; left:500px; top:0px;}
	50%  {background:blue; color:green; left:500px; top:100px;}
	90%  {background:green; color:red; left:0px; top:100px;}
	100% {background:red; color:black; left:0px; top:0px;}
}

Практическое применение возможности анимации без программирования на JavaScript и др. технологиях разумно при публикации рекламных объявлений.
Источник

Exit mobile version