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

Анимация CSS через keyframes, без воды и максимально просто

Автор статьи: admin

В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.

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

Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.

Базовая работа с @keyframes:

Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для @keyframes:

Этих свойств очень много  и применяются они к элементу, который вы хотите анимировать, сначала покажу только самые основные.

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

Пример работы с @keyframes:

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

CSS же очень простой, сначала пишем стили для блока, что бы он выглядел как блок, потом уже и сами настройки анимации.

Разбор кода:

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

Потом задаём времени и сколько раз должно проигрываться, там используется параметр 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.

Разбор кода:

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

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

Для animation-timing-function используется параметр linear, который делает так, чтобы скорость анимации была равномерной, то есть не как по умолчания, сначала быстро, а потом медленно.

Больше тут не чего сказать.

Работа с @keyframes уровня бог:

Вот тут уже разберём кое что интересное.

Профессиональный пример работы с @keyframes:

Тут почти не чего не поминалось, а HTML вообще не поменялся.

Разбор кода:

Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.

Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.

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

Дополнительно про анимации:

Также есть свойство animation, оно позволяет задать все свойства для настройки анимации представленные выше, в одном свойстве.

Дополнительные свойства:

• 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, оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:

• 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 определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

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

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

<!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).

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

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

<!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} /* конец цикла анимации */
}

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

   0%-100% - определяет процент от продолжительности анимации. 
   from - тоже самое, что 0%.
   to - тоже самое, что 100%. 
   

   Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах (0% — соответствует началу анимации, 100% — соответствует завершению анимации), или с помощью ключевых слов «from» и «to», которые соответствуют процентным значениям 0% и 100%.
   Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to).

   Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему).
   Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% {}.

3. 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>

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

С использованием селектора класса и свойства 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 на другой.

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

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

@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>

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

С использованием селектора класса и свойства 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>

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

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

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

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

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

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”. Далее открываются фигурные скобки, в которых записываются нужные правила.

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

Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.

Применяем анимацию в действии

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

Выбрать элемент, для которого она будет применяться

Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо.

Пробуем

В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.

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

Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые:

animation-name: pulse;
animation-duration: 2s;

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

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

animation-iteration-count: 4;

Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.

Бесконечная анимация в css3

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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;}}

Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.

Рис. 2. Исходный размер текста

Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.

Теперь задаем:

animation-direction: reverse;

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

Форма анимации

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

animation-timing-function: ease;

Выполнение начнется медленно, потом ускорится, а в конце вновь сбавит скорость. Кроме этого есть и другие эффекты: ease-in, ease-out, ease-in-out. Все их описывать не буду, можете сами попробовать применить их к элементам.

Сокращенная запись

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

animation: имя|длительность|форма|задержка|направление|число повторов

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

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

Примеры:

ANIMATE.CSS

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

bounceflashpulserubberBandshakeswingtadawobblejelloheartBeatbounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRightslideInUpslideInDownslideInLeftslideInRightslideOutUpslideOutDownslideOutLeftslideOutRightzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUphingejackInTheBoxrollInrollOut

Анимировать

Установка:

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

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

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

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

Задержка:

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

Пример:

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

Пример

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


.yourElement {

   animation-duration: 3s;

   animation-delay: 2s;

   animation-iteration-count: infinite;

}


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

animate.css на github.com

css — CSS3 анимация — плавный бесконечный цикл

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

CSS анимация бесконечного вращения — qaru

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

.

javascript — бесконечная анимация CSS

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

.

CSS-анимаций

---

CSS-анимации

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

• @keyframes
• название анимации
• продолжительность анимации
• задержка анимации
• количество итераций анимации
• направление анимации
• функция синхронизации анимации
• режим заливки анимации
• анимация

---

Браузер Поддержка анимации

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
@keyframes	43,0	10,0	16,0	9,0	30,0
название анимации	43,0	10,0	16,0	9,0	30.0
продолжительность анимации	43,0	10,0	16,0	9,0	30,0
задержка анимации	43,0	10,0	16,0	9,0	30,0
Количество итераций анимации	43,0	10,0	16.0	9,0	30,0
анимация-направление	43,0	10,0	16,0	9,0	30,0
функция синхронизации анимации	43,0	10,0	16,0	9,0	30,0
режим заливки анимации	43.0	10,0	16,0	9,0	30,0
анимация	43,0	10,0	16,0	9,0	30,0

---

Что такое CSS-анимация?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

Вы можете изменять столько свойств CSS, сколько хотите, сколько угодно раз.

Чтобы использовать анимацию CSS, сначала необходимо указать несколько ключевых кадров для
анимация.

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.

---

Правило @keyframes

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

Чтобы анимация работала, необходимо привязать анимацию к элементу.

В следующем примере «пример» анимации привязывается к элементу

.Анимация будет длиться 4 секунды, и постепенно изменится
цвет фона элемента
от «красного» до «желтого»:
Пример
/ * Код анимации * /
Пример @keyframes {
из {background-color: red;}
к {background-color: yellow;}
}
/ * Элемент, к которому применяется анимация * /
div {
width: 100px;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
Попробуй сам »
Примечание: Свойство animation-duration
определяет, сколько времени должно занять анимация.Если свойство animation-duration не указано,
анимации не будет, потому что
значение по умолчанию — 0 с (0 секунд).
В приведенном выше примере мы указали, когда стиль изменится, используя
ключевые слова «от» и «до» (что означает 0% (начало) и 100% (завершено)).
Также можно использовать проценты. Используя проценты, вы можете добавить столько
стиль меняется по своему усмотрению.
В следующем примере изменяется цвет фона
элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:
Пример
/ * Код анимации * /
пример @keyframes
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
Попробуй сам »
В следующем примере будут изменены и цвет фона, и положение
элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:
Пример
/ * Код анимации * /
пример @keyframes
{
0% {background-color: red; слева: 0px; top: 0px;}
25% {цвет фона: желтый; слева: 200 пикселей; top: 0px;}
50% {цвет фона: синий; слева: 200 пикселей; top: 200px;}
75% {цвет фона: зеленый; слева: 0px; top: 200px;}
100% {цвет фона: красный; слева: 0px; top: 0px;}
}
/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
Попробуй сам »
---
---
Задержка анимации
Свойство animation-delay определяет задержку для начала анимации.
В следующем примере перед запуском анимации задана 2-секундная задержка:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
задержка анимации: 2 с;
}
Попробуй сам »
Допускаются также отрицательные значения. При использовании отрицательных значений анимация
начнется так, как если бы он уже играл в течение N секунд.
В следующем примере анимация начнется так, как если бы она уже была
играет за 2 секунды:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
задержка анимации: -2 с;
}
Попробуй сам »
---
Установить, сколько раз анимация должна запускаться
Свойство animation-iteration-count определяет, сколько раз анимация должна запускаться.
В следующем примере анимация будет запущена 3 раза до ее остановки:
Пример
div {
width: 100px;
высота: 100 пикселей;
позиция: относительная;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 3;
}
Попробуй сам »
В следующем примере для анимации используется значение infinite.
продолжаться вечно:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации:
бесконечный;
}
Попробуй сам »
---
Анимация запуска в обратном направлении или с чередованием циклов
Свойство animation-direction указывает
следует ли воспроизводить анимацию вперед, назад или поочередно
циклы.
Свойство анимации-направление может иметь следующие значения:
• normal — Анимация воспроизводится как обычно
  (нападающие). Это по умолчанию
• reverse — Анимация воспроизводится в
  обратное направление (назад)
• альтернативный — Воспроизводится анимация
  сначала вперед, затем назад
• альтернативно-обратный — Анимация воспроизводится
  сначала назад, затем вперед
В следующем примере анимация будет запущена в обратном направлении (назад):
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
анимация-направление:
обеспечить регресс;
}
Попробуй сам »
В следующем примере используется значение «альтернативный» для создания анимации.
беги сначала вперед, потом назад:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
альтернативный;
}
Попробуй сам »
В следующем примере значение «alternate-reverse» используется для создания анимации.
сначала бежать назад, затем вперед:
Пример
div {
width: 100px;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
альтернативно-реверсивный;
}
Попробуй сам »
---
Укажите кривую скорости анимации
Свойство функции синхронизации анимации определяет кривую скорости
анимация.
Свойство функции-времени-анимации может иметь следующие значения:
• легкость — Определяет анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
• linear — Задает анимацию с одинаковой скоростью от начала до конца
• easy-in — Определяет анимацию с медленным запуском
• easy-out — Определяет анимацию с медленным концом
• easy-in-out — Определяет анимацию с медленным началом и концом
• cubic-bezier (n, n, n, n) — Позволяет вам определять свои собственные значения в кубической функции Безье
В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:
Пример
# div1 {функция-время-анимации: линейная;}
# div2
{функция-время-анимации: легкость;}
# div3 {функция-времени-анимации:
easy-in;}
# div4 {функция-тайминга-анимации: easy-out;}
# div5
{animation-time-function: easy-in-out;}
Попробуй сам »
---
Укажите режим заливки для анимации
CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра
или после воспроизведения последнего ключевого кадра.Свойство animation-fill-mode может
переопределить это поведение.
Свойство animation-fill-mode определяет
стиль для целевого элемента, когда анимация не воспроизводится (до этого
начинается, после окончания или и то, и другое).
Свойство animation-fill-mode может иметь следующие значения:
• нет — значение по умолчанию. Анимации не будет
  применить любые стили к элементу до или после выполнения
• вперед — элемент сохранит
  значения стиля, заданные последним ключевым кадром (зависит от направления анимации
  и количество итераций анимации)
• назад — элемент получит стиль
  значения, которые задаются первым ключевым кадром (зависит от направления анимации), и
  сохранить это в течение периода задержки анимации
• оба — Анимация будет следовать правилам
  как вперед, так и назад, расширяя свойства анимации в обоих
  направления
В следующем примере элемент
сохраняет значения стиля из
последний ключевой кадр по окончании анимации:
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
режим заливки-анимации: вперед;
}
Попробуй сам »
В следующем примере элемент
может получить значения стиля, установленные
первый ключевой кадр перед запуском анимации (во время периода задержки анимации):
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
режим-заливки-анимации: назад;
}
Попробуй сам »
Следующий пример позволяет элементу
получить установленные значения стиля.
по первому ключевому кадру перед запуском анимации и сохраните значения стиля
от последнего ключевого кадра по окончании анимации:
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: both;
}
Попробуй сам »
---
Свойство сокращения анимации
В примере ниже используются шесть свойств анимации:
Пример
div
{
имя-анимации: пример;
продолжительность анимации: 5 с;
функция времени анимации: линейная;
задержка анимации: 2 с;
количество итераций анимации: бесконечно;
направление анимации: альтернативное;
}
Попробуй сам »
Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения
анимация свойство:
---
Проверьте себя упражнениями!
---
Свойства анимации CSS
В следующей таблице перечислены правило @keyframes и все свойства анимации CSS:
.
No related posts.
Share :