Как использовать animate css – основной синтаксис, настройка параметров, примеры использования

Leave a Comment / Css / By /

Содержание

Подключение и примеры использования Animate.css

Монитор ImacПривет. Напомню, что уже писал про плавность и анимацию в CSS3, но это были всего лишь базовые принципы. Сейчас же предлагаю ознакомиться с готовым набором свойств анимации в одном файле animate.css. Это не генератор, а библиотека, которая вполне корректно работает во всех популярных браузерах. И вы можете посмотреть вот эти примеры.

Демо

Подключение Animate.css

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

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

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

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

<a href="#">Ссылка</a>

<a href="#">Ссылка</a>

Именно таким образом прописывается свойства анимации объектов. Пишем 2 класса, animated — обязательный, а tada — один из эффектов. Но нам нужен непосредственно цикл и сейчас мы это сделаем. Это можно сделать, создав новый класс и прописать к нему специальные свойства или же к уже существующему.

Циклическая анимация Animate.css

.tada{animation-iteration-count: infinite;}

.tada{animation-iteration-count: infinite;}

То есть при создании своего класса, это будет выглядеть вот так:

<a href="#">Ссылка</a>

<a href="#">Ссылка</a>

.new{animation-iteration-count: infinite;}

.new{animation-iteration-count: infinite;}

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

СКАЧАТЬ

Учебник 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)		Значение первого
ключевого кадра
normal0% или from
alternate
0% или from
reverse100% или to
alternate-reverse100% или 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.

Анимация Animations CSS уроки для начинающих академия


Анимация CSS

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

CSS

Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

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

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

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

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

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

Правило @keyframes

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

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

В следующем примере анимация "example" привязывается к элементу <div>. Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от "Red" на "желтый":

Пример

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Библиотека animate.css: простая анимация на css3

Вы, наверное, обращали внимание на анимационные эффекты при показе контента на некоторых сайтах.

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

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

Основой многих эффектов является сборник animate.css
Он создан Дэном Эденом, британским дизайнером из Манчестера.

Посмотреть все эффекты анимации animate.css можно здесь - https://daneden.github.io/animate.css

Там же можно скачать файл animate.css

Оцените анимацию на примере моей новой темы для wordpress All Services:

- Анимация блоков,
- Анимация текста.

Чтобы оценить эффект полностью, прокрутите страницу вниз.

Итак, как добавить анимацию на сайт?

Содержание:

  1. Скачайте файл animate.css
  2. Подключите файл animate.css
  3. Выберите подходящий эффект
  4. Примените его к нужному элементу

↑ Скачайте файл animate.css

Можно использовать полную версию этого файла - https://github.com/daneden/animate.css/blob/master/animate.css .
Она подойдет, если вы планируете изменять ее под свои нужды.

Или упакованную версию - https://github.com/daneden/animate.css/blob/master/animate.min.css, обфусцированную, говоря русским языком :).

Она меньше размером и подойдет, если вы не планируете разбираться с ней подробнее.

↑ Подключите файл animate.css

Подключить его нужно в functions.php, примерно так:

// register scripts & styles
function animate_scripts() {
  if (!is_admin()) {
     wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/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 на другой.

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

ЗначениеОписание
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>

В этом примере мы создали простую анимацию, в которой с помощью 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 Пример использования пошаговых функций.

все параметры анимации — учебник CSS

Итак, мы с вами рассмотрели восемь разных свойств для CSS-анимации. Если записать каждое из них в отдельной строке, да еще и не забыть про вендорные префиксы, то в общей сложности получится более 30 строк кода для одной анимации!

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


div {
    animation-name: coolAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-delay: 500ms;
    animation-iteration-count: 6;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* Стиль выше эквивалентен следующему: */

div {
    animation: coolAnimation 3s ease-in 500ms 6 reverse forwards paused;
}

Конечно же, нет необходимости использовать каждое из восьми свойств анимации, ведь обязательными являются только два — animation-name и animation-duration. И если вам нужно добавить третий параметр (к примеру, animation-iteration-count), вы можете сделать следующую запись:


div {
    animation: coolAnimation 3s 6;
}

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


div {
    animation: firstAnimation 300ms ease-in,
               secondAnimation 1s linear alternate;
}

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

15 лучших инструментов CSS3-анимации для разработчиков

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


Magic CSS3 Animations — это пакет CSS3-анимаций со спецэффектами, которые вы можете свободно использовать для любых веб-проектов. Просто включите стиль CSS magic.css или минимизированную версию magic.min.css.


CSS3 Animation Cheat Sheet представляет собой набор предустановленной plug-and-play анимации для веб-проектов. Для его использования нужно добавить стили на сайт и применить подготовленные классы CSS к элементам, которые вы хотите анимировать. CSS3 Animation Cheat Sheet использует правило @keyframes и работает во всех последних версиях браузеров (в том числе в IE 10).


CSS3 Keyframes Animation Generator представляет собой онлайн-инструмент, который позволяет создавать анимацию с помощью правила @keyframes.


Включает в себя многие эффекты CSS. Эффекты рассортированы по нескольким категориям (магия, перспектива, вращение, мерцание, статика, слайды, CSS3 анимация при наведении), и все они довольно красивые. Каждый из них имеет свои собственные классы. Самый простой способ применить их — добавить эти классы к целевым элементам через JavaScript.


Animate.css предоставляет набор кросс-браузерных эффектов CSS3-анимации. Эффекты могут использоваться для привлечения внимания, создания анимации на основе появления и исчезновения элементов.


Это JavaScript-библиотека для создания динамической анимации. Просто добавьте компонент и выберите пресет. После этого вы можете получить короткий URL-адрес или экспортировать анимацию CSS3 из примеров.


Hover.CSS — полезная коллекция эффектов на CSS3, которые могут применяться для призыва к действию, кнопкам, логотипам, специальным изображениям и так далее. Для использования коллекции достаточно скопировать и вставить код эффекта в CSS или разместить ссылку на его файл стилей.


AniJS — это декларативная библиотека для создания CSS-анимации, которая позволяет ускорить и обогатить разработку. Она полностью документирована и проста в использовании.


ProgressJs — это JavaScript и CSS3 библиотека, которая помогает разработчикам создавать и управлять индикаторами загрузки (прогресс-барами). Вы можете создать собственный шаблон для прогресс-бара или легко настроить готовый.


Keyframer — это удобный инструмент, который поможет вам создать CSS3 анимацию. Кeyframer довольно прост в использовании. Чтобы добавить ключевой кадр, вам нужно только кликнуть по шкале времени, а затем нажать на круглую кнопку, чтобы применить CSS-стили для анимации. Или кнопку с крестиком, чтобы удалить текущий кадр.


Инструмент для простого создания CSS3-анимации. Нужно настроить анимацию с помощью графика, изменить ее, получить сгенерированный CSS-код и все готово!


CSSketch — это Sketch 3 плагин, который позволяет быстро изменять дизайн, вкладывая таблицы стилей. Он поддерживает язык стилей {less}. Благодаря этому вы сможете использовать в таблице стилей функции и переменные. CSSketch — это программное обеспечение с полностью открытым исходным кодом, так что вы можете внести свой вклад в его развитие.


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


Это средство для тестирования отказоустойчивости (постепенной деградации) кода CSS3. С его помощью вы сможете увидеть, как веб-страница будет отображаться в IE 6-8 версии.


GFX — это библиотека 3D CSS3 анимации, которая расширяет JQuery несколькими полезными функциями для программного создания CSS3 переходов, которые управляются с помощью метода setTimeout.

Данная публикация представляет собой перевод статьи «15 Best CSS3 Animation Tools for Developers» , подготовленной дружной командой проекта Интернет-технологии.ру

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *