Css infinite animation: CSS3-анимация (свойство animation)

Содержание

Учебник CSS 3. Статья «Анимация элементов в CSS. Часть 2»

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

Рис. 196а Пример покадровой анимации.

Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье «Анимация в CSS. Часть 1».

Состояние анимации

Следующее простое свойство, которое мы рассмотрим animation-play-state, оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:

running — анимация воспроизводится (значение по умолчанию).
paused — анимация приостановлена.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Приостановка и запуск анимации</title>
<style>
 .test {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта белый */
background: green; /* цвет заднего фона */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно  */
animation-play-state: running; /* анимация воспроизводится (значение по умолчанию)  */
}
.test:hover {
animation-play-state: paused; /* указываем, что анимация приостанавливается при наведении курсора мыши на элемент  */
}
 @keyframes iliketomoveit {
	0%   {left: 0px;} /* начало цикла анимации */
	25%  {left: 400px;} /* 25% от продолжительности анимации */
	75%  {left: 200px;} /* 75% от продолжительности анимации */ 
	100% {left: 0px;} /* конец цикла анимации */
}
</style>
</head>
	<body>
		<div class = "test">наведи на меня</div>	
	</body>
</html>

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.

При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state, анимация возобновляется, когда курсор покидает элемент.

Результат нашего примера:

Рис. 197 Пример приостановки и запуска анимации.

Направление анимации

CSS свойство animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

Ниже представлены возможные значения для настройки направления анимации:

Значение	Описание
normal	Каждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
reverse	Анимация воспроизводиться в обратном направлении.
alternate	Анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5…) и как reverse каждый четный раз (2, 4, 6…).
alternate-reverse	Анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5…) и как normal каждый четный раз (2, 4, 6…).

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Направление анимации</title>
<style>
 div {
width: 75px; /* ширина элемента */
height: 75px; /* высота элемента */
border-radius: 60px; /* форма углов элемента */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта белый */
padding: 15px; /* внутренние отступы элемента со всех сторон */
position: relative; /* элемент с относительным позиционированием */
animation-duration: 1.5s; /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit; /* задаём имя анимации */
animation-iteration-count: infinite; /* анимация будет повторяться бесконечно  */
}
.test {
animation-direction: normal; /* при завершении цикла анимации, анимация сбрасывается в начало и начинает цикл заново. */ 
}
 .test2 {
animation-direction: reverse; /* анимация воспроизводиться в обратном направлении */ 
}
.test3 {
animation-direction: alternate; /* анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5...) и как reverse каждый четный раз (2, 4, 6...) */ 
}
.test4 {
animation-direction: alternate-reverse; /* анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5...) и как normal каждый четный раз (2, 4, 6...) */ 
}
@keyframes iliketomoveit {
	0%   {top: 0px;} /* начало цикла анимации */
	25%  {top: 180px; background: red;} /* 25% от продолжительности анимации */
	75%  {top: 90px;} /* 75% от продолжительности анимации */
	 100% {top: 0px; background: black;} /* конец цикла анимации */
}
</style>
</head>
	<body>
		<div class = "test">normal</div>
		<div class = "test2">reverse</div>
		<div class = "test3">alternate</div>
		<div class = "test4">alternate-reverse</div>
	</body>
</html>

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента.

С использованием селектора класса и свойства animation-direction мы указали различные значения, которые определяют возможные направления для анимации.

Результат нашего примера:

Рис. 198 Направление анимации в CSS.

Стиль для элемента, когда анимация не воспроизводится

CSS свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку, установленную свойством animation-delay).

Ниже представлены возможные значения для настройки этого свойства:

Значение

Описание

none

К элементу не применяются какие-либо стили до (во время задержки анимации), или после воспроизведения анимации. Значение по умолчанию.

forwards

По окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-direction и animation-iteration-count:

animation-direction (значение по умолчанию normal)	animation-iteration-count (значение по умолчанию 1)	Значение последнего ключевого кадра
normal	четное или нечетное число	100% или to
reverse	четное или нечетное число	0% или from
alternate	четное число	0% или from
alternate	нечетное число	100% или to
alternate-reverse	четное число	100% или to
alternate-reverse	нечетное число	0% или from

backwards

К элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода заданного свойством animation-delay. Первый ключевой кадр определяется на основании значения animation-direction:

animation-direction (значение по умолчанию normal)	Значение первого ключевого кадра
normal	0% или from
alternate	0% или from
reverse	100% или to
alternate-reverse	100% или to

both

К элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки).

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Использование свойства animation-fill-mode</title>
<style>
div {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта */
background: green; /* цвет заднего фона */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
position: relative; /* элемент с относительным позиционированием  */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-animation-delay: 2s; /* анимация воспроизводится c задержкой 2 секунды  */
}
 .test {
animation-fill-mode: none; /* не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации */
}
.test2 {
animation-fill-mode: forwards; /* по окончанию анимации  применяется стиль последнего ключевого кадра (красный фон) */
}
.test3 {
animation-fill-mode: backwards; /*  применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. */
}
.test4 {
animation-fill-mode: both; /*  применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки). */
}
 @keyframes iliketomoveit {
	0%   {background: yellow;} /* задаем цвет заднего фона при начале анимации */
	100% {background: red;} /* задаем цвет заднего фона по завершению анимации */
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
		<div class = "test2">forwards</div>
		<div class = "test3">backwards</div>
		<div class = "test4">both</div>
	</body>
</html>

В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay).

С использованием селектора класса и свойства animation-fill-mode мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):

Первый элемент — к элементу не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации. Это значение по умолчанию.
Второй элемент — по окончанию анимации к элементу применяется стиль последнего ключевого кадра (красный фон).
Третий элемент — к элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр).
Четвертый элемент — к элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки). Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр), а по окончанию получит красный фон

Результат нашего примера:

Рис. 199 Пример использования свойства animation-fill-mode.

Универсальное свойство animation

Мы с Вами рассмотрели все возможные свойства анимации, введенные в CSS 3, это нам было необходимо для того, чтобы мы могли грамотно использовать универсальное свойство animation, которое позволяет задать все эти свойства анимации в одном объявлении, ведь набирать их по отдельности, как правило, затруднительно.

Давайте перед тем как перейдем к примерам, повторим свойства, которые мы рассмотрели:

Обратите внимание на важный момент, порядок свойств в списке соответствует необходимому порядку указания значений в свойстве animation. Имя анимации может быть указано как в начале списка, так и в его конце.

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, так как значение по умолчанию у этого свойства равно нулю.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Использование универсального свойства animation</title>
<style>
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px; /* устанавливаем высоту блока */
position: relative; /* элемент с относительным позиционированием */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* name duration timing-function delay iteration-count direction */ 
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* задаем положение элемента при начале анимации */ 
	50% {left: 500px; border-radius: 50px; background: plum;} /* задаем смещение элемента относительно левого края, изменяем цвет заднего фона и определяем форму границ (скругление) */ 
	100% {left: 0px; background: green;} /* задаем первоначальное положение и задаем цвет заднего фона по завершению анимации */ 
} 
</style>
</head>
	<body>
		<div class = "test"></div>
	</body>
</html>

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции, изменяя при этом цвет заднего фона и форму границ элемента (свойство border-radius).

С использованием универсального свойства animation мы указали следующие параметры анимации:

Имя анимации — iliketomoveit.
Длительность анимации — 4 секунды.
Кривая скорости — шаговая анимация steps(3,start). На каждую часть ключевого кадра будет произведено 3 шага.
Задержка анимации — 500 миллисекунд.
Количество циклов — infinite (бесконечно).
Направление анимации — reverse (в обратном направлении).

Результат нашего примера:

Рис. 200 Пример использования универсального свойства animation.

Рассмотрим следующий пример в котором

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Анимация загрузки на CSS</title>
<style>
body {
margin: 0; /* внешние отступы */
padding: 0; /* внутренние отступы */
}
.container {
width: 100px; /* ширина элемента */
padding-top: 100px; /* внутренние отступы сверху */
margin: 0 auto; /* центрируем элемент внешними отсутупами */
}
div > div {
display: inline-block; /* устанавливаем вложенные элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 10px; /* ширина элемента */
height: 10px; /* высота элемента */
margin: 0 auto; /* центрируем элементы внешними отсутупами */
border-radius: 50px; /* определяем форму углов */
}
.item:nth-child(1) {
background: orange; /* цвет заднего фона */
animation: up 1s linear 1s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(2) {
background: violet; /* цвет заднего фона */
animation: up 1s linear 1.2s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(3) {
background: magenta; /* цвет заднего фона */
animation: up 1s linear 1.4s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(4) {
background: lightseagreen; /* цвет заднего фона */
animation: up 1s linear 1.6s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(5) {
background: forestgreen; /* цвет заднего фона */
animation: up 1s linear 1.8s infinite; /* name duration timing-function delay iteration-count */ 
}
@keyframes up {
    0%, 100% { /* начало и конец цикла анимации */
    transform: translateY(-15px); /* сдвиг элемента по оси Y */
    }
    50% { /* середина анимации */
    transform: translate(5px, 0); /* сдвиг элемента на 5px по оси X, по оси Y сдвиг отсутствует */
    }
}
</style>
</head>
	<body>
		<div class = "container"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
		</div>
	</body>
</html>

В этом примере мы создали несколько анимаций, в которых с помощью свойства transform происходит сдвиг вложенных элементов <div> по оси X (горизонтальная ось) и по оси Y (вертикальная ось). Для каждого элемента <div> была установлена различная задержка анимации, составляющая от 1 секунды до 1,8 секунды. Каждая анимация элементов содержит следующие параметры:

Имя анимации — up.
Длительность анимации — 1 секунда.
Кривая скорости — linear (одинаковая скорость на протяжении всей анимации).
Задержка анимации — от 1 секунды до 1,8 секунды.
Количество циклов — infinite (бесконечно).

Выбор элементов <div> происходит с помощью псевдокласса :nth-child(n) в заисимости от их размещения (порядкового номера).

Результат нашего примера:

Рис. 201 Пример анимации загрузки.

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

Использование библиотеки Animate.css

Библиотека Animate.css представляет из себя по большому счету файл css стилей, который содержит набор ключевых кадров для кроссбраузерной анимации с применением различных эффектов (набор CSS свойств) и набор классов для их воспроизведения. Библиотека содержит набор таких эффектов как изменение прозрачности элемента, эффекты для привлечения внимания, эффекты поворота, появления и исчезновения, увеличения и уменьшения, и многие другие.

Посмотреть все возможные анимации вы можете на сайте проекта, там же доступна к скачиванию минимизированная версия стилей (стили без пробелов и переносов строк). Кроме того, в репозитории GitHub автора проекта вы сможете скачать для изучения, или использования не сжатую версию CSS стилей библиотеки Animate.css. Давайте перейдем в репозиторий и скачаем его содержимое (кнопка «Clone or Download»). На этапе изучения Вам понадобится из скачанного архива только файл animate.css (не сжатая версия).

Чтобы использовать эту библиотеку, достаточно скопировать этот файл стилей в папку с Вашим документом и подключить с использованием тега <link>:

<head>
	<link rel = "stylesheet" href = "animate.css"> 
</head>

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

@keyframes fadeIn {
	from { /* начало цикла анимации (аналогично 0%) */
	opacity: 0; /* элемент полностью прозрачный */
	}

	to { /* конец цикла анимации (аналогично 100%) */
	opacity: 1; /* элемент непрозрачный */
	}
}
.fadeIn {
animation-name: fadeIn; /* имя анимации (соответствует имени в правиле @keyframes) */
}

Эти ключевые кадры с помощью свойства opacity позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.

Но этого пока недостаточно, чтобы запустить интересующую Вас анимацию библиотеки Animate.css. Для того, чтобы запустить анимацию Вы можете, но не обязаны, воспользоваться следующими созданными автором проекта классами:

/* базовый класс, который позволяет запустить анимацию один цикл */ 
.animated { 
animation-duration: 1s; /* продолжительность анимации 1 секунда */
animation-fill-mode: both; /* задает стиль для элемента, когда анимация не воспроизводится (как только анимация будет завершена и перед тем как она будет запущена - во время задержки).*/
}

/* добавление класса .infinite элементу, которому установлен класс .animated позволит бесконечно проигрывать анимацию */ 
.animated.infinite {
animation-iteration-count: infinite; /* анимация будет проигрываться бесконечно */
}

Обращаю Ваше внимание, что вы можете создать свои классы, которые будут контролировать процесс анимации. Как правило, добавление классов тому, или иному элементу происходит с использованием языка JavaScript в зависимости от действий пользователя, или каких-то определенных событий. Мы с Вами рассмотрим пример в котором будем использовать только классы из библиотеки Animate.css и установим анимацию только с использованием каскадных таблиц стилей.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Анимация с использованием библиотеки Animate.CSS</title>
	<link rel = "stylesheet" href = "animate.css"> <!-- подключаем библиотеку Animate.css -->
</head>
	<body>
		<img src = "/images/fair.png" alt = "mishka" width = "200px" height = "200px" class = "animated infinite fadeIn">
	</body>
</html>

В этом примере мы подключили с использованием тега <link> библиотеку Animate.css и разместили изображение, к которому подключили (указали через пробел) следующие 3 класса из библиотеки:

Результат нашего примера:

Рис.202 Пример анимации с использованием библиотеки Animate.CSS.

Учебник CSS 3. Статья «Анимация элементов в CSS. Часть 1»

Ранее в статье учебника «Переходные эффекты в CSS» мы с Вами познакомились с эффектами, которые позволяют анимировать переход от одного набора CSS свойств к другому (transition). CSS3 предоставляет нам еще один более мощный инструмент создания анимации, который не ограничивается выполнением одного перехода, а позволяет создавать неограниченное количество таких переходов.

Другими словами, анимация позволяет нам переходить от одного состояния (набора свойств) ко второму, от второго к третьему, и даже при необходимости воспроизводить анимацию в обратном порядке, когда количество переходов завершено.

Рис. 190 Пример покадровой анимации.

По аналогии с переходными эффектами, для проигрывания анимации необходимо инициировать её воспроизведение, будь то первоначальная загрузка страницы, или получение фокуса элементом, наведение указателя мыши на элемент и так далее.

Этапы создания анимации

Давайте рассмотрим из чего же состоит процесс создания анимации в CSS. Для начала Вам необходимо определить ключевые кадры анимации. Что из себя представляет ключевой кадр? Представьте себе элемент, который позиционируется слева от окна браузера и Вам необходимо осуществить его анимацию до середины окна и вернуть его в первоначальное положение. Для этой анимации нам потребуется три ключевых кадра:

Первый – определяет начальное положение элемента.
Второй – определяет положение элемента после смещения элемента до середины окна.
Третий – определяет конечную точку анимации (начальное положение элемента).

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

Следующим шагом нам необходимо назначить анимацию интересующему нас элементу, или элементам. При этом существует возможность указать для каждого элемента свою индивидуальную настройку анимации.

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

Прежде чем мы перейдем к созданию анимации, хочу обратить Ваше внимание на текущую поддержку свойств анимации браузерами:

Определение ключевых кадров

В CSS правило @keyframes позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации. Это дает возможность точнее контролировать процесс анимации вручную, задавая для нее промежуточные шаги.

Для создания ключевых кадров необходимо придерживаться следующего синтаксиса:

@keyframes animationName {
	from | % {css-styles} /* начало цикла анимации */
	to | % {css-styles} /* конец цикла анимации */
}

Имя анимации (animationName). Чтобы использовать ключевые кадры, создается правило @keyframes с произвольным именем анимации, которое впоследствии используется в свойстве animation-name, либо в универсальном свойстве animation для добавления списка ключевых кадров в анимацию, но об этом позднее.
Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (—). Обращаю Ваше внимание на то, что первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Два тире подряд запрещены в начале имени. Кроме того, не могут использоваться специальные зарезервированные слова, такие как none, unset, initial, или inherit в любом сочетании.
Cелектор ключевого кадра (from | to | %) представляет из себя процент от продолжительности анимации. Допустимые значения:
```
0%-100% - определяет процент от продолжительности анимации. 
from - тоже самое, что 0%.
to - тоже самое, что 100%. 
```
Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах (0% — соответствует началу анимации, 100% — соответствует завершению анимации), или с помощью ключевых слов «from» и «to», которые соответствуют процентным значениям 0% и 100%.
Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to). Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему). Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% {}.
CSS стили (css-styles) — одно или несколько допустимых (анимируемых) свойств стиля CSS. Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию. Узнать является ли свойство анимируемым, вы можете в справочнике CSS в описании интересующего Вас свойства.

Свойства, указанные в ключевом кадре со значением !important игнорируются. Ранее в статье «Каскадность в CSS» (раздел «Нюансы конфликтов») мы уже с Вами затрагивали вопросы об отмене значимости стилей.

Предположим, что нам необходимо создать анимацию увеличения элемента, при которой элемент будет изменять цвет заднего фона:

@keyframes growElement { /* указываем имя анимации */
	0% { /* начало цикла анимации */
	width: 50px; /* ширина элемента */
	background-color: yellow; /* цвет заднего фона */ 
	}
	50% { /* середина цикла анимации */ 
	width: 100px; /* ширина элемента */
	background-color: green; /* цвет заднего фона */
	}
	100% { /* конец цикла анимации */
	width: 200px; /* ширина элемента */
	background-color: red; /* цвет заднего фона */
	}
}

С помощью процентных значений мы определили три ключевые кадра, где происходит изменение. Первоначально элемент к началу анимации получает значение ширины равной 50 пикселям и цвет заднего фона желтый, к 50% процентам анимации (середина анимации) он должен быть уже 100 пикселей и иметь цвет заднего фона зеленый, а к завершению анимации ширина элемента должна составлять 200 пикселей, а цвет заднего фона должен быть красный.

Если наш элемент возвращался бы к первоначальному состоянию (ширина и цвет заднего фона), то мы бы могли указать значения ключевых кадров следующим образом:

@keyframes growElement { 
	0%, 100% { /* начало и конец цикла анимации */
	width: 50px; /* ширина элемента */
	background-color: yellow; /* цвет заднего фона */
	}
	50% { /* середина цикла анимации */
	width: 100px; /* ширина элемента */
	background-color: green; /* цвет заднего фона */
	}
}

Следующее CSS свойство, которое мы уже упоминали — animation-name, оно указывает имя анимации, или список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает (ссылается) на правило (@keyframes), которое определяет значения свойств анимации. Но в одиночку мы не сможем рассмотреть это свойство, так как, чтобы запустить любую анимацию нам необходимо указать её продолжительность.

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

/* для поддержки старых версий браузера Mozilla */
@-moz-keyframes growElement { 
	/* ключевые кадры */
}

/* для поддержки старых версий браузеров Chrome, Opera, Safari */
@-webkit-keyframes growElement { 
	/* ключевые кадры */
}

/* современные браузеры */
@keyframes growElement { 
	/* ключевые кадры */
}

Все свойства анимации animation-* и универсальное свойство animation, по аналогии с правилом @keyframes, требуют указания вендорных префиксов (-moz- и –webkit-) для поддержки более широкого круга браузеров.

Продолжительность анимации

Как минимум, чтобы анимация начала воспроизводиться, необходимо указать её имя, которое было указано в правиле @keyframes и задать её продолжительность. В CSS свойство animation-duration определяет, сколько секунд, или миллисекунд затрачивается на выполнение одного цикла анимации.

После того как у нас определены минимальные требования для выполнения анимации, необходимо применить её к интересующему нас элементу, или элементам страницы. Обратите внимание, что, если просто добавить анимацию к стилю какого-либо элемента, то анимация будет воспроизведена при загрузке страницы.

Перейдем к рассмотрению примера, в котором мы будем анимировать увеличение элементов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Продолжительность анимации в CSS</title>
<style>
div {
width: 50px; /* ширина элемента */
height:  50px; /* высота элемента */
background-color: yellow; /* цвет заднего фона */
margin-top: 20px; /* внешний отступ сверху */
}
div:nth-child(1) { /* первый элемент <div> по порядку */
animation-duration: 2s; /* продолжительность анимации 2 секунды */
}
div:nth-child(2) { /* второй элемент <div> по порядку */
animation-duration: 4s; /* продолжительность анимации 4 секунды */
}
div:nth-child(3) { /* третий элемент <div> по порядку */
animation-duration: 900ms; /* продолжительность анимации 900 миллисекунд */
}
div:hover { /* добавляем имя анимации при наведении на элемент <div> */
animation-name: growElement; /* задаем имя анимации */
}
@keyframes growElement {
	0% { /* начало цикла анимации */
	width: 50px; /* ширина элемента */
	background-color: yellow; /* цвет заднего фона */
	}
	50% { /* середина цикла анимации */
	width: 100px; /* ширина элемента */
	background-color: green; /* цвет заднего фона */
	}
	100% { /* конец цикла анимации */
	width: 200px; /* ширина элемента */
	background-color: red;  /* цвет заднего фона */
	}
}
</style>
</head>
	<body>
		<div>2s</div>
		<div>4s</div>
		<div>900ms</div>
	</body>
</html>

В этом примере мы создали простую анимацию, в которой происходит постепенное увеличение ширины элемента и изменение цвета заднего фона к середине и к концу цикла анимации. С использованием псевдокласса :nth-child() и свойства animation-duration мы указали различные значения продолжительности анимации для элементов <div> в зависимости от их порядкового номера в документе.

Кроме того, для того, чтобы инициировать воспроизведение анимации, мы создали стиль, который свойством animation-name задает имя анимации для элемента <div> на которой в настоящее время наведен курсор мыши (псевдокласс :hover()).

Результат нашего примера:

Рис. 191 Продолжительность анимации в CSS.

Рассмотрим следующий пример в котором мы создадим несколько различных анимаций и назначим их одному элементу.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Несколько анимаций у одного элемента</title>
<style>
div {
width: 50px; /* ширина элемента */
height:  50px; /* высота элемента */
background-color: yellow; /* цвет заднего фона */
margin-top: 20px; /* внешний отступ сверху */
animation-duration: 3s; /* продолжительность анимации 3 секунды */
}
div:hover { 
animation-name: growElement, skewElement; /* задаем несколько имен анимаций при наведении */
}
@keyframes growElement {
	0%, 100% { /* начало и конец цикла анимации */
	width: 50px; /* ширина элемента */
	background-color: yellow; /* цвет заднего фона */
	}
	50% {  /* середина цикла анимации */
	width: 300px; /* ширина элемента */
	background-color: green; /* цвет заднего фона */
	}
}
@keyframes skewElement {
	5%, 100% { /* 5% и 100% (конец анимации) от продолжительности анимации */
	transform: skew(0deg); /* отсутствие наклона элемента */
	}
	50% { /* середина цикла анимации */
	transform: skew(-50deg); /* наклон элемента относительно оси X (горизонтальная ось) на -50 градусов. */
	}
	95% { /* 95% от продолжительности анимации */
	transform: skew(50deg); /* наклон элемента относительно оси X (горизонтальная ось) на 50 градусов. */
	}
}
</style>
</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

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

Свойством animation-duration мы указали продолжительность анимации для элементов <div> равную трем секундам. Для того, чтобы инициировать воспроизведение анимации, мы создали стиль, который свойством animation-name задает несколько анимаций для элемента <div> на которой в настоящее время наведен курсор мыши (псевдокласс :hover()).

Результат нашего примера:

Рис. 192 Установка нескольких анимаций у одного элемента.

Количество анимационных циклов

По умолчанию любая анимация в CSS будет воспроизведена только один раз. Благодаря свойству animation-iteration-count мы сможем указывать сколько раз будет проигрываться анимационный цикл, это может быть, как произвольное число раз, либо указать, что анимация будет воспроизводиться бесконечно, в некоторых случаях это очень полезно.

Обратите внимание на то, что запрещается указывать отрицательные значения по объективным причинам, но допускается указывать не целые значения, при этом будет проигрываться только часть анимационного цикла — пропорционально указанному значению (например, значение 1.5 соответствует воспроизведению анимационного цикла полтора раза).

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Повторение анимации</title>
<style>
div {
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
border-radius: 100%; /* определяем форму углов элемента (скругляем) */
display: inline-block; /* устанавливаем элементы как блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта */
padding: 15px; /* внутренние отступы элемента со всех сторон */
position: relative; /* относительное позиционирование (для возможности смещения во время анимации) */
text-align: center; /* выравниваем текст по центру */
line-height: 50px; /* устанавливаем высоту строки */
animation-duration: 1.5s; /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit; /* задаём имя анимации */
}
.test {
animation-iteration-count: 1; /* указываем, что анимация будет повторяться 1 раз */
} 
.test2 {
animation-iteration-count: 2; /* указываем, что анимация будет повторяться 2 раза */
} 
.test3 {
animation-iteration-count: 3.5; /* указываем, что анимация будет повторяться 3 с половиной раза */
}
.test4 {
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно */
}
@keyframes iliketomoveit { 
	0%   {top: 0px;} /* начало цикла анимации */
	25%  {top: 200px; background: red;} /* 25% от продолжительности анимации */
	75%  {top: 100px;} /* 75% от продолжительности анимации */ 
	100% {top: 0px; background: black;} /* конец цикла анимации */
} 
</style>
</head>
	<body>
		<a href = "javascript:window.location.reload()">Обновите перед просмотром</a></br>
		<div class = "test">1</div>
		<div class = "test2">2</div>
		<div class = "test3">3.5</div>
		<div class = "test4">infinite</div>
	</body>
</html>

С использованием селектора класса и свойства animation-iteration-count мы указали различные значения, которые определяют количество проигрываний анимационного цикла у элементов.

Обратите внимание, что мы разместили ссылку, которая производит перезагрузку страницы с использованием URL псевдопротокола javascript:, который позволяет выполнить код языка программирования JavaScript таким образом. Не смотря на то, что это решает нашу задачу по перезагрузке страницы, никогда не используйте URL псевдопротокол javascript: на своих страницах. Так как эта тема выходит за рамки этой статьи и изучения CSS в целом, мы не будем в настоящее время на этом останавливаться.

Результат нашего примера:

Рис. 193 Повторение анимации в CSS.

Задержка анимации

CSS свойство animation-delay определяет задержку для запуска анимации. Задержка анимации задается в секундах (s), или миллисекундах (ms).

Значение 0s (значение по умолчанию) для свойства animation-delay, указывает, что анимация должна начаться без задержки. Если указать для анимации отрицательное значение задержки, то анимация начнет воспроизводиться без задержки, но со смещением равному указанному значению (т.е. если вы укажите -5s, то анимация будет воспроизведена без задержки и с того момента как будто она уже длится 5 секунд). Допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Задержка анимации</title>
<style>
div {
width: 75px; /* ширина элемента */
height: 75px; /* высота элемента */
border-radius: 100%; /* определяем форму углов элемента */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* задаём имя анимации */
animation-duration: 5s; /* задаём продолжительность анимации */
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно  */
}
.test {
animation-delay: -500ms; /* устанавливаем отрицательную задержку равную -500ms (без задержки со смещением)  */ 
}
.test2 {
animation-delay: 1500ms; /* устанавливаем задержку анимации равную 1500 миллисекунд */ 
}
.test3 {
animation-delay: 2s; /* устанавливаем задержку анимации равную 2 секунды */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} /* начало цикла анимации */
	25%  {left: 400px; background: red;} /* 25% от продолжительности анимации */
	75%  {left: 200px;} /* 75% от продолжительности анимации */  
	100% {left: 0px; background: black;} /* конец цикла анимации */
} 
</style>
</head>
	<body>
		<a href = "javascript:window.location.reload()">Обновите перед просмотром</a></br>	
		<div class = "test">-500ms</div>
		<div class = "test2">1500ms</div>
		<div class = "test3">2s</div>
	</body>
</html>

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

С использованием селектора класса и свойства animation-delay мы указали различные значения, которые определяют задержку для запуска анимации.

Результат нашего примера:

Рис. 194 Задержка анимации в CSS.

Скорость анимации

По аналогии с переходными эффектами (transition) допускается определить кривую скорости для анимации (математическая функция — кубическая кривая Безье). Кривая скорости задается с помощью свойства animation-timing-function и определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой.

Возможные значение свойства представлены ниже в таблице:

Значение	Описание
ease	Эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию.
linear	Определяет эффект анимации с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси X и по оси Y, точка 2 — на 1 по оси X и по оси Y.
ease-in	Определяет эффект анимации с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1).
ease-out	Определяет эффект анимации с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1).
ease-in-out	Определяет эффект анимации с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси X и на 0 по оси Y, точка 2 — на 0,58 по оси X и на 1 по оси Y.
cubic-bezier(n,n,n,n)	Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1. Первые два значения — координаты X и Y первой точки, а вторые два значения — координаты X и Y второй точки). На данном сайте вы сможете подобрать оптимальные для Вас значения.
steps(int,start\|end)	Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end». Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага.
step-start	Значение эквивалентно steps(1, start). Свойство сразу принимает конечное значение шага в ключевом кадре.
step-end	Значение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага.

Обратите внимание, что если для конкретного ключевого кадра вам необходимо определить собственную временную функцию, то необходимо определить её непосредственно в стилях этого кадра:

@keyframes iliketomoveit {
	0%   {left: 0px;}  
	25%  {left: 400px; animation-timing-function: linear ;} /* определяем отдельную функцию для данного ключевого кадра */  
	75%  {left: 200px;}  
	100% {left: 0px;}  
}

Несколько значений, предназначенных для различных анимаций указываются через запятую. Каждое значение в этом случае соответствует отдельной анимации:

animation-name: "animationName1, animationName2, animationName3";
animation-timing-function: "linear, ease, ease-in";

Перейдем к рассмотрению примера, в котором для демонстрации рассмотрим применение к элементам различных кривых скорости:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость анимации в CSS</title>
<style>
div {
width: 45px; /* ширина элемента */
height: 45px; /* высота элемента */
color: white; /* цвет шрифта белый */
background: green; /* цвет заднего фона */
margin-bottom: 5px; /* внешний отступ от нижнего края элемента */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* задаём имя анимации */
animation-duration: 5s; /* задаём продолжительность анимации */
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно  */
}
.test {
timing-function: ease; /* эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется  */
}
.test2 {
timing-function: linear; /* эффект анимации с одинаковой скоростью от начала до конца */ 
}
.test3 {
timing-function: ease-in; /* эффект анимации с медленного старта */ 
}
.test4 {
timing-function: ease-out; /* эффект анимации с медленным окончанием */ 
}
.test5 {
timing-function: ease-in-out; /* эффект перехода с медленным стартом и медленным окончанием */ 
}
.test6 {
timing-function: cubic-bezier(.94,.06,.83,.67); /* пользовательские значения в кубической функции Безье */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px ;} /* начало цикла анимации */
	25%  {left: 400px ;} /* 25% от продолжительности анимации */
	75%  {left: 200px ;} /* 75% от продолжительности анимации */
	100% {left: 0px ;} /* конец цикла анимации */
}
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

С использованием селектора класса и свойства animation-timing-function мы указали различные значения, которые определяют различную скорость для анимации. Были использованы такие ключевые слова свойства как: ease, linear, ease-in, ease-out, ease-in-out и произвольные (пользовательские) значения в кубической функции Безье.

Результат нашего примера:

Рис. 195 Пример использования CSS свойства animation-timing-function.

Рассмотрим пример функций пошаговой анимации:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример пошаговой анимация в CSS</title>
<style>
div {
width: 70px; /* устанавливаем ширину блока */
height: 70px; /* устанавливаем высоту блока */
color: white; /* устанавливаем цвет шрифта белый */
background: green; /* устанавливаем цвет заднего фона */
margin-bottom: 5px; /* устанавливаем отступ от нижнего края элемента */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s; /* задаём продолжительность анимации */
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно  */
}
.test {
animation-timing-function: steps(3, end); /* указывает пошаговую функцию  */ 
}
.test2 {
animation-timing-function: steps(3, start); /* указывает пошаговую функцию */ 
}
.test3 {
animation-timing-function: step-start; /* указывает пошаговую функцию - эквивалент steps(1, start) */ 
}
.test4 {
animation-timing-function: step-end; /* указывает пошаговую функцию - steps(1, end) */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} /* начало цикла анимации */
	25%  {left: 400px;} /* 25% от продолжительности анимации */ 
	75%  {left: 200px;} /* 75% от продолжительности анимации */  
	100% {left: 0px;} /* конец цикла анимации */ 
}
</style>
</head>
	<body>
		<div class = "test">steps(3, end)</div>
		<div class = "test2">steps(3, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

С использованием селектора класса и свойства animation-timing-function мы указали, что на каждую часть ключевого кадра будет произведено 3 шага (начало точки ключевого кадра/конец точки ключевого кадра), либо 1 шаг (точки ключевого кадра/конец точки ключевого кадра) для функций step-start и step-end.

Главное, что необходимо понять, при использовании пошаговых функций, что количество шагов, которое вы указываете устанавливается на ключевой кадр, а не на всю анимацию. Этот пример носит больше демонстрационную функцию, а не практическую, пошаговые функции могут применяться в постепенном заполнении элемента, или например, чтобы создать часы.

Результат нашего примера:

Рис. 196 Пример использования пошаговых функций.

Свойство animation | CSS справочник

basicweb.ru

HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred

HTML

HTML учебник
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Мнемоники
Коды языков
HTML цвета
Тесты знаний

CSS

CSS учебник
Справочник свойств
CSS селекторы
CSS функции
CSS правила
Flexbox генератор
Grid генератор
LESS учебник

JavaScript

Интерфейсы веб API
Объект Array
Объект Date
Объект Function
Объект Global
Объект JSON
Объект Math^β
Объект Number
Объект Object
Объект Promise
Объект RegExp
Объект String

jQuery

jQuery селекторы
jQuery события
jQuery методы DOM
jQuery перемещения
jQuery утилиты
jQuery эффекты
jQuery AJAX
jQuery объект Callbacks
jQuery объект Deferred

CSS свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-start
grid-row-gap
grid-row-end
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
justify-content
justify-items
justify-self
height
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
place-items
place-self
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last

Набор анимаций animate.css

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.

Примеры:

ANIMATE.CSS

Выберите нужный эффект:

bounceflashpulserubberBandshakeswingtadawobblejelloheartBeatbounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRightslideInUpslideInDownslideInLeftslideInRightslideOutUpslideOutDownslideOutLeftslideOutRightzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUphingejackInTheBoxrollInrollOut

Анимировать

Установка:

Просто добавляем на сайт стили animate.css:

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:

Название класса	Время задержки
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

Продолжительность:

Название класса	Скорость
slow	2s
slower	3s
fast	800ms
faster	500ms

Пример:

<div>Пример</div>

Пример

Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:


.yourElement {

   animation-duration: 3s;

   animation-delay: 2s;

   animation-iteration-count: infinite;

}

Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js

animate.css на github.com

CSS3 анимация и пример ее использования, бесконечный повтор

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

ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.

Основы создания

Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в css реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом:

Создаются сами эффекты переходов с помощью @keyframes

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

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать.
Синтаксис @keyframes
Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл):
@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}
@keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}}
100%{font-size: 50px;}}
Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила.
Проценты, это так называемые временные отметки, на которых к элементу будут добавляться указанные свойства. В нашем случае записанное означает следующее: в самом начале выполнения размер шрифта будет составлять 50 пикселей, в ее середине он увеличиться до 60-ти, а в конце опять уменьшиться до начального размера.
Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.
Применяем анимацию в действии
Пока у нас просто код, который формирует анимационный эффект, но он нигде не применяется. Если вы обновите вашу веб-страницу, на ней ничего не изменится. Соответственно, чтобы применить анимацию, нужно выполнить два действия:
Выбрать элемент, для которого она будет применяться
Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо.
Пробуем
В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.
Есть два обязательных свойства, которые нужно указать в таком случае, чтобы все заработало. Во-первых, это имя, которое мы писали в keyframes. Во-вторых, это длительность анимации, потому что без этого параметра браузер просто не сможет ее воспроизвести.
Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые:
animation-name: pulse; animation-duration: 2s;
animation-name: pulse;
animation-duration: 2s;
Таким образом, мы связали элемент с описанной ранее анимацией, а также указали ее длительность. Обновите страницу и вы убедитесь, что все уже работает – наш эффект действительно выполнится, но всего лишь один раз.
Чтобы управлять количеством повторений, существует еще одно свойство:
animation-iteration-count: 4;
animation-iteration-count: 4;
Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.
Бесконечная анимация в css3
Реализуется очень легко с помощью этого же свойства. На самом деле вы можете просто задеть количество повторений в пару тысяч, этого вполне хватит, но теоретически наша анимация не будет повторяться бесконечно.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Я рекомендую для реализации бесконечных повторений писать так:
animation-iteration-count: infinite;
animation-iteration-count: infinite;
Все, теперь мы сделали бесконечный повтор. Проверять так ли это, просидев всю жизнь за монитором, я не советую. Просто это применяется в тех случаях, когда вы хотите, чтобы эффект постоянно повторялся и не исчезал. Если он ненавязчивый и не отвлекает пользователя, то почему бы и нет.
Задержка перед началом
По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах.
Направление
Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр.
@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}
@keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}
70%{font-size: 80px;}
100%{font-size: 50px;}}
Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.
Рис. 2. Исходный размер текста
Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.
Теперь задаем:
animation-direction: reverse;
animation-direction: reverse;
Все перевернулось наоборот. Сначала текст увеличиться аж на 30 пикселей, до 80-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто.
Форма анимации
А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие:
animation-timing-function: ease;
animation-timing-function: ease;
Выполнение начнется медленно, потом ускорится, а в конце вновь сбавит скорость. Кроме этого есть и другие эффекты: ease-in, ease-out, ease-in-out. Все их описывать не буду, можете сами попробовать применить их к элементам.
Сокращенная запись
Чтобы все вышеперечисленные параметры записать в одну строку и сэкономить кучу места в коде, используйте сокращенную запись:
animation: имя|длительность|форма|задержка|направление|число повторов
animation: имя|длительность|форма|задержка|направление|число повторов
Я думаю, пока вам хватит этого для создания своих толковых анимаций. Намного больше здесь зависит от вашей фантазии. Как видите, не слишком много свойств нужно знать для реализации красивых вещей на странице.
На самом деле мы с вами рассмотрели лишь базовые возможности. Например, ту же форму анимации можно задавать с помощью функции кубических кривых Безье, но это более сложная тема для разговора, я бы даже сказал, абсолютная не нужная новичку, потому что вышеперечисленных свойств вам точно хватит для создания простых и достаточно сложных анимационных эффектов.
Итак, это был пример анимации на css3, таковых примеров можно приводить еще много, но главное тут понять суть, разобраться с синтаксисом @keyframes и тогда никаких проблем и у вас не возникнет. Другие css3 свойства вы можете изучить в этом курсе. Подписывайтесь на наш блог, чтобы получать классные материалы по сайтостроению.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Анимация CSS через keyframes, без воды и максимально просто
Автор статьи: admin
В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.
Также надо сказать, что здесь не будет показываться наглядно что в итоге получилось использовав тот или иной код, но вы сможете его внизу скачать и поэкспериментировать с ним.
Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.
Базовая работа с @keyframes:
Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.
Суть работы с @keyframes:
Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».
Свойства «animation-…» для @keyframes:
Этих свойств очень много и применяются они к элементу, который вы хотите анимировать, сначала покажу только самые основные.
Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.
Пример работы с @keyframes:
Для примера будет показан блок div, виде квадрата, с помощью анимации будем его изменять, как его создавать в HTML показывать не буду, если вы читаете эту статью, думаю вы уже умеете это делать.
CSS же очень простой, сначала пишем стили для блока, что бы он выглядел как блок, потом уже и сами настройки анимации.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.square {
    width: 100px;
    height: 100px;
    background-color: green;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: square1;
}

@keyframes square {
    from {
        width: 100px;
        background-color: green;
    }

    50% {
        background-color: blue;
    }

    to {
        width: 200px;
        background-color: red;
    }
  }
Разбор кода:
Давайте теперь разберем, что тут написано, первые три строчки свойств для нашего квадрата, это размер и цвет блока.
Потом задаём времени и сколько раз должно проигрываться, там используется параметр infinite, что значит проигрывать анимацию бесконечно, ну и в конце задаётся имя анимации.
Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.
В from задаётся начальные свойства элемента, на которую используется анимация, но задавать его не обязательно, также это слово можно заменить, просто написав вместо него 0%.
Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.
В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.
Более подробная работа с @keyframes:
В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.
Ещё больше свойств «animation-…» для @keyframes:
animation-direction — определяет, как должна воспроизводится анимация, вперёд, назад или переменно вперед и назад;
animation-timing-function — это грубо говоря меняет задаёт как происходит анимация, про неё надо писать отдельно;
Теперь я показал на мой взгляд самые важные свойства, но ниже будут ещё, которые могут пригодится.
Пример более продвинутой работы с @keyframes:
Почти точно такой же блок div мы создаём и работаем с ним.
Тут только поменялся CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.square {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-name: square2;
}

@keyframes square2 {
    90% {
        background-color: blue;
    }

    to {
        width: 500px;
        height: 200px;
        background-color: green;
    }
}
Разбор кода:
Про код тут нечего говорить, разве что мы не используем from и добавилось два новых свойств, для настройки анимации.
Для animation-direction используется параметр alternate, который говорит, что анимация, после того как проиграется до конца, сразу же начнёт проигрываться в обратном порядке.
Для animation-timing-function используется параметр linear, который делает так, чтобы скорость анимации была равномерной, то есть не как по умолчания, сначала быстро, а потом медленно.
Больше тут не чего сказать.
Работа с @keyframes уровня бог:
Вот тут уже разберём кое что интересное.
Профессиональный пример работы с @keyframes:
Тут почти не чего не поминалось, а HTML вообще не поменялся.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.square {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-duration: 5s, 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear, ease-in-out;
    animation-name: squareSize, squareColor;
}

@keyframes squareSize {
    90% {
        width: 200px;
    }

    to {
        width: 500px;
        height: 150px;
    }
}

@keyframes squareColor {
    25% {
        background-color: red;
    }

    75% {
        background-color: blue;
    }

    to {
        background-color: green;
    }
}
Разбор кода:
Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.
Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.
Остальные свойства точно также задаём, первый параметр свойства будет для работать для первой анимация, второй для второй анимации, и т.д. и неважно сколько у вас этих анимаций, но если только один параметр у свойство задан, то он будет применяться для всех анимаций.
Дополнительно про анимации:
Также есть свойство animation, оно позволяет задать все свойства для настройки анимации представленные выше, в одном свойстве.
animation: animation-duration || animation-timing-function ||
  animation-delay || animation-iteration-count || animation-direction ||
  animation-fill-mode || animation-play-state || [none | animation-name]
Дополнительные свойства:
animation-delay — Делает задержку перед проигрыванием анимации;
animation-fill-mode — Определяет как нужно применять стили к элементу анимации, до и после применения;
animation-play-state — Определяет состояние анимации, пауза или проигрыш;
Их не было раньше, так как, мне кажется они не особо нужны, и используются очень редко.
Вывод:
В этой статье вы прочитали как работает анимация css с использованием keyframes, в принципе всё не очень сложно, главное практиковаться, ну и скачайте код и проверьте как он работает.
Подписываетесь на соц-сети:
Оценка:
Количество оценивших: 1
Средняя оценка: 5,00
Загрузка…
Также рекомендую:
Учебник CSS 3. Статья «Анимация элементов в CSS. Часть 2»
В этой статье мы продолжим изучать нюансы применения анимации, изучим такие возможности CSS как приостановка анимации , направление анимации , рассмотрим как указать стиль для элемента, когда анимация не воспроизводится , разберем как грамотно применять универсальное свойство для создания анимации, подключим и научимся использовать библиотеку Animate.css .
Рис. 196а Пример покадровой анимации.
Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье «Анимация в CSS. Часть 1».
Состояние анимации
Следующее простое свойство, которое мы рассмотрим animation-play-state, оно определяет состояние анимации. Этому свойству передается одно из двух ключевых слов:
работает — анимация воспроизводится (значение по умолчанию).
приостановлено — анимация приостановлена.
Перейдем к рассмотрению примера:
Приостановка и запуск анимации <стиль> .test { ширина: 100 пикселей; / * ширина элемента * / высота: 100 пикселей; / * высота элемента * / цвет белый; / * цвет шрифта белый * / фон: зеленый; / * цвет заднего фона * / положение: относительное; / * элемент с относительным позиционированием * / имя-анимации: iliketomoveit; / * имя анимации * / продолжительность анимации: 5 с; / * продолжительность анимации * / количество итераций анимации: бесконечно; / * указываем, что анимация будет повторяться бесконечно * / состояние воспроизведения анимации: работает; / * анимация воспроизводится (значение по умолчанию) * / } .test: hover { состояние воспроизведения анимации: приостановлено; / * указываем, что анимация приостанавливается при наведении курсора мыши на элемент * / } @keyframes iliketomoveit { 0% {left: 0px;} / * начало цикла анимации * / 25% {left: 400px;} / * 25% от продолжительности анимации * / 75% {left: 200px;} / * 75% от продолжительности анимации * / 100% {left: 0px;} / * конец цикла анимации * / }
наведи на меня

В этом примере мы создали простую анимацию, в которой с помощью свойств CSS слева смещаем элемент с относительным позиционированием левого края текущей позиции.
При наведении на элемент курсора мыши (псевдокласс: hover ()) анимация приостанавливается за счет установки значения paused свойству animation-play-state, анимация возобновляется, когда курсор покидает элемент.
Результат нашего примера:
Рис. 197 Пример приостановки и запуска анимации.
Направление анимации
Свойство CSS animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими настройками указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).
Ниже представлены возможные значения для настройки направления анимации:
Значение Описание
нормальный Каждый раз, когда цикл анимации завершен, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
обратный Анимация воспроизводиться в обратном направлении.
альтернативный Анимация воспроизводиться как нормальный каждый нечетный раз (1, 3, 5…) и как
.
Учебник CSS 3. Статья «Анимация элементов в CSS. Часть 1»
Ранее в статье учебника «Переходные эффекты в CSS» мы с вами познакомились с эффектами, которые позволяют анимировать переход от одного набора свойств CSS к другому (переход). CSS3 позволяет нам еще один более мощный инструмент создания анимации, который не ограничивается выполнением одного перехода, а позволяет создавать неограниченное количество таких переходов .
Другими словами, анимация позволяет нам переходить от одного состояния (набора свойств) ко второму , от к третьему , и даже при необходимости воспроизводить анимацию в обратном порядке, когда количество переходов завершено.
Рис. 190 Пример покадровой анимации.
По аналогии с переходными эффектами, для проигрывания анимания начинается запуск страницы, или получение фокуса, наведение указателя мыши на элемент и так далее.
Этапы создания анимации
Давайте рассмотрим из чего же состоит процесс создания анимации в CSS. Для начала Вам необходимо определить ключевые кадры анимации. Что из себя представляет ключевой кадр? Представьте себе элемент, позиционируется слева от окна и Вам необходимо осуществить его анимацию до середины окна.Для этой анимации нам потребуется три ключевых кадра:
Первый — определить начальное положение элемента.
Второй — положение элемента после смещения элемента до середины окна.
Третий — определить конечную точку анимации (начальное положение элемента).
После того как ключевые кадры пользователя определены, на браузер будет возлагаться задача прорисовывать все промежуточные фазы, которые мы определили с помощью ключевых кадров.То есть, задача прорисовывать элемент в этих промежутках лежит исключительно в браузере, с нашей стороны необходимо указать эти точки анимации, или другими словами, мы должны указать браузеру как он должен изменить один стиль к другому между ключевыми кадрами.
Следующим шагом необходимо назначить анимацию интересующему нас элементу, или элементам. При этом существует возможность указать для каждого элемента свою индивидуальную настройку анимации.
Далее в этой статье мы используем подробно, как установить задержку анимации, как задать продолжительность цикла, указать ее скорость и направление, состояние анимации на текущий момент и даже определить стиль для элемента в тот момент, когда анимация не воспроизводится.
Прежде чем мы перейдем к созданию анимации, хочу обратить ваше внимание на текущую поддержку анимации браузерами:
Определение ключевых кадров
В правило CSS @keyframes позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации. Это дает возможность точнее контролировать процесс анимации вручную, задавая для нее промежуточные шаги.
Для создания кадров необходимо придерживаться следующего синтаксиса:
@keyframes animationName { из | % { css-styles } / * начало цикла анимации * / к | % { css-styles } / * конец цикла анимации * / }
Имя анимации ( animationName ).Чтобы использовать определенные кадры, создается @keyframes с произвольным именем анимации, используется в своем имени-анимации, либо в универсальном анимации для добавления списка ключевых кадров в анимацию, но об этом позднее.
Имя анимации может состоять из латинских букв без учета регистра от A до Z , цифр от 0 до 9 , подчеркивания знака ( _ ), и / или т
.
Свойство анимации | Справочник CSS
basicweb.ru
HTML
Учебник HTML
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Коды языков
Мнемоники
Цвета
Тесты знаний
CSS
Учебник CSS
Справочник свойств
Селекторы
Обязательства
Правила
Flexbox генератор
Сетевой генератор
Учебник МЕНЬШЕ
JavaScript
Интерфейсы веб API
Объект Массив
Дата размещения
Объект Функция
Объект Global
Объект JSON
Объект Математика
Номер объекта
Объект Объект
Объект RegExp
Обещание объекта
Строка объекта
jQuery
Селекторы
События
Методы ДОМ
Перераз
Утилиты
Эффекты
AJAX
Объект Обратные звонки
Объект отложен
HTML
HTML учебник
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Мнемоники
Коды языков
HTML цвета
Тесты знаний
CSS
.
Набор анимаций animate.css

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.
Примеры:
ANIMATE.CSS
Выберите нужный эффект:
bounceflashpulserubberBandshakeswingtadawobblejelloheartBeatbounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRightslideInUpslideInDownslideInLeftslideInRightslideOutUpslideOutDownslideOutLeftslideOutRightzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUphingejackInTheBoxrollInrollOut
Анимировать
Установка:
Просто добавляем на сайт стили анимировать.css :
Использование:
Чтобы анимировать элемент, добавить к нему класс , анимированный и эффект из таблицы ниже:
Отскок
Название класса
отскок вспышка импульс резиновая лента
встряхнуть Встряхивание головы качели тада
колебание желе В bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
затухание исчезновение fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
затуханиеInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
исчезновение fadeOutUpBig flipInX перекидной
flipOutX перекидной световая скорость в lightSpeedOut
повернуть в Повернуть Вниз Влево rotateInDownRight вращение влево
повернутьInUpRight повернуть на выходе Повернуть Вверх Вниз Влево rotateOutDownRight
Повернуть Вверх Влево ПовернутьВыбросить петля jackInTheBox
рулон В рулон Выход зум зумВниз
зум Влево зум InRight ZoomInUp ZoomOut
ZoomOutDown zoomOutLeft ZoomOutRight ZoomOutUp
слайдInDown слайд влево слайдInRight слайдInUp
слайдOutDown слайдOutLeft слайдOutRight выдвижной выход
heartBeat
Можно также добавить класс бесконечный для бесконечного цикла, задержку и продолжительность эффекта:
Задержка:
Название класса Время задержки
задержка-2 с 2с
задержка-3 с 3с
задержка-4 с 4с
задержка-5 с 5с
Продолжительность:
Название класса Скорость
медленная 2с
медленнее 3с
быстро 800 мс
быстрее 500 мс
Пример:
Пример
Пример
Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:
.yourElement { ) продолжительность анимации: 3 секунды; задержка анимации: 2 с; количество итераций анимации: бесконечно; }
Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js
animate.css на github.com
.
No related posts.

Значение	Описание
нормальный	Каждый раз, когда цикл анимации завершен, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
обратный	Анимация воспроизводиться в обратном направлении.
альтернативный	Анимация воспроизводиться как нормальный каждый нечетный раз (1, 3, 5…) и как

Название класса
отскок	вспышка	импульс	резиновая лента
встряхнуть	Встряхивание головы	качели	тада
колебание	желе	В	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
затухание	исчезновение	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
затуханиеInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
исчезновение	fadeOutUpBig	flipInX	перекидной
flipOutX	перекидной	световая скорость в	lightSpeedOut
повернуть в	Повернуть Вниз Влево	rotateInDownRight	вращение влево
повернутьInUpRight	повернуть на выходе	Повернуть Вверх Вниз Влево	rotateOutDownRight
Повернуть Вверх Влево	ПовернутьВыбросить	петля	jackInTheBox
рулон В	рулон Выход	зум	зумВниз
зум Влево	зум InRight	ZoomInUp	ZoomOut
ZoomOutDown	zoomOutLeft	ZoomOutRight	ZoomOutUp
слайдInDown	слайд влево	слайдInRight	слайдInUp
слайдOutDown	слайдOutLeft	слайдOutRight	выдвижной выход
heartBeat

Название класса	Время задержки
задержка-2 с	2с
задержка-3 с	3с
задержка-4 с	4с
задержка-5 с	5с

Название класса	Скорость
медленная	2с
медленнее	3с
быстро	800 мс
быстрее	500 мс

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное

Детская кроватка для новорожденного: как правильно выбрать

Разное