10 лучших библиотек для css-анимации 10 лучших библиотек для css-анимации

Проигрывание анимации

Свойство animation-play-state позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект (состояние :hover). Не наследуется.

running – значение по умолчанию, означает проигрывание анимации.
paused – останавливает анимацию.

Пример (при наведении на элемент анимация останавливается):

See the Pen <a href=’http://codepen.io/AmateR/pen/ONgOQY/’>ONgOQY</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration. Не наследуется.

element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек.
}

The @keyframes Rule

When you specify CSS styles inside the
rule, the animation will gradually change from the current style to the new style
at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the «example» animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from «red» to «yellow»:

Example

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

Note: The property
defines how long an animation should take to complete. If the property is not specified,
no animation will occur, because
the default value is 0s (0 seconds).

In the example above we have specified when the style will change by using
the keywords «from» and «to» (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many
style changes as you like.

The following example will change the background-color of the <div>
element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */@keyframes example
{
  0%   {background-color: red;}

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

The following example will change both the background-color and the position of the <div>
element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */@keyframes example
{
0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

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

Более подробная работа с @keyframes:

В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.

Ещё больше свойств «animation-…» для @keyframes:

animation-direction — определяет, как должна воспроизводится анимация, вперёд, назад или переменно вперед и назад;
animation-timing-function — это грубо говоря меняет задаёт как происходит анимация, про неё надо писать отдельно;

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

Пример более продвинутой работы с @keyframes:

Почти точно такой же блок div мы создаём и работаем с ним.

Тут только поменялся CSS.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.square {

width100px;

height100px;

background-colorred;

animation-duration10s;

animation-iteration-countinfinite;

animation-directionalternate;

animation-timing-functionlinear;

animation-namesquare2;

}

@keyframes square2 {

90% {

background-colorblue;

}

to {

width500px;

height200px;

background-colorgreen;

}

Разбор кода:

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

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

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

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

Установить, сколько раз анимация должна выполняться

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

В следующем примере анимация будет выполняться 3 раза, прежде чем она остановится:

Пример

div {
width: 100px;    height: 100px;
position: relative;    background-color: red;
animation-name: example;
animation-duration: 4s;    animation-iteration-count: 3;}

В следующем примере используется значение «Infinite» для того, чтобы анимация продолжалась навсегда:

Пример

div {
width: 100px;    height: 100px;
position: relative;    background-color: red;
animation-name: example;
animation-duration: 4s;    animation-iteration-count:
infinite;}

Материалы для дальнейшего изучения

Animate.css — самая знаменитая библиотека CSS-анимаций.
Effect.css — не менее известная библиотека анимаций.
CSS3 Animation Cheat Sheet — отличная подборка примеров.
Курс CSS3 анимаций на htmlacademy — лучшее место, чтобы освоить анимации на практике. Платно, но очень дешево.
MDN CSS Animation — самый актуальный справочник по анимациям.
Обязательно поиграйте с Bounce.js. Крутейшие и супер-плавные эффекты.
Motion-ui-design — крутая коллекция ссылок по анимациям от @fliptheweb.

На этом всё! Есть несколько мелочей, которые мы не рассмотрели, подробнее о них можно прочесть в приведённых выше материалах. Однако вы должны знать, что и без них вы только что изучили CSS3-анимации примерно на 97,8%. Поздравляю

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» , подготовленной дружной командой проекта Интернет-технологии.ру

Creating a photo carousel

As a demonstration, we’re now going to build a ‘carousel’ of images
rotating around the vertical axis — similar to a slide projector. In
addition to the above styles, we now assign position: absolute
to each image child of the spinner element, and some formatting:

If you also set -webkit-backface-visibility: hidden; on the
img elements then any facing away from the screen will be hidden rather
than displayed in reverse, leaving you with just half the animation.

You can download all the required styles here: 3d-transforms.css

Finally, here’s the HTML markup for five randomly selected photos:

To make things easier to start with, all the images have the same
height, so we just needed to adjust the padding on the inside edge to
have them join up at the central axis. If the heights vary you also
need vertical padding. You can do away with the padding altogether if
you want, but it becomes more useful as more images are added.

And here’s the final product!

The result in Safari 5 looks something like the snapshot below, with
the photo on the right coming towards you and the others moving away.

Internet Explorer 10 and 11 still do not support the
preserve-3d property so the result is flattened rather than
three-dimensional.

The whole construction is rotating a full circle every 6 seconds. There
is some transparency in the white inner section letting you see parts
of photos in the background:

It may look complicated, but luckily for you we’ve written a short
PHP script to set up a spinning carousel for any number of images:

This code sets the padding at the centre of the carousel to half the
width of the widest image. It should work for any number of images.

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

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

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

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

Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.square{

width100px;

height100px;

background-colorblue;

animation-duration5s,10s;

animation-iteration-countinfinite;

animation-directionalternate;

animation-timing-functionlinear,ease-in-out;

animation-namesquareSize,squareColor;

}

@keyframessquareSize{

90%{

width200px;

}

to{

width500px;

height150px;

}

@keyframessquareColor{

25%{

background-colorred;

}

75%{

background-colorblue;

}

to{

background-colorgreen;

}

Разбор кода:

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

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

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

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

Tweaking the keyframes timing

As mentioned above, using different transition timing functions can
make the animation more appealing. The problem is that it’s difficult
to set up unless you know exactly how many elements you’re dealing with.

For this example, we’re going to re-use the above example, which we know
has five sides, and set up a keyframe to display them to best
effect. We’ve called the new keyframes spinner5 because it’s
optimised for display five sides in sequence:

We then need to modify the style settings for the ‘spinner’ to
reference the new keyframes and to make some changes to the timing and
duration:

The result, which you see here, is much more user-friendly. During
each 20-second iteration, each photo is displayed still for 3 seconds,
followed by a rotation to the next face which takes only 1 second.

The difficulty in setting this up for any number of photos is that
keyframes only allows percentage and not fractional settings, so some of
the values would need to be approximated. Also we need to add a new
keyframe for each photo added.

2. Animate CSS

Конечно же я не могу обделить вниманием Animate CSS, наверное одну из самых известных библиотек анимации. Рассмотрим вкратце ее использование

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

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

<div class="animated slideInLeft"></div>

//Javascript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

//Jquery
$(".my-element").addClass("animated slideInLeft")

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

Дополнительные возможности

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

delay

Вы можете добавить задержку для своей анимации добавив класс delay

<div class="animated slideInLeft delay-{1-5}"><div>

speed

Также вы можете контролировать скорость анимации добавив один из перечисленных ниже классов

Class name	Speed time
slow	2s
slower	3s
fast	800ms
faster	500ms

<div class="animated slideInLeft slow|slower|fast|faster"><div>

Использование CSS-переменной currentColor для стилизации содержимого

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

Идея заключается в том, чтобы применить к оба свойства ( и ). Давайте сразу перейдем к примеру кода, чтобы увидеть как это работает.

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

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

Если мы установим на элемент , этот цвет будет применяться к обоим , и получатся две одноцветные капельки — это не то, чего мы хотим.

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

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

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

Теперь, используя свойства и , мы можем стилизовать капельки:

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

Вот результат:

Эта двухцветная техника весьма полезна для простых двухцветных логотипов. В своей статье Fabrice делает три разных варианта логотипа Sass, изменяя цвет текста и цвет фона.

На сегодня — это единственная доступная переменная в CSS. Однако, если бы у нас было больше переменных, мы бы смогли передать больше значений в содержимое . Amelia Bellamy-Royds представляла эту концепцию в записи своего Codepen блога около года назад. Давайте посмотрим, как это работает.

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации

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

На данный момент существует несколько уже встроенных аргументов для этого правила: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end.

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end.

ease – функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear – анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
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).
cubic-bezier(x1, y1, x2, y2) – см.выше.
inherit – наследует это свойство от родительского элемента.

Визуальное сравнение

See the Pen <a href=’http://codepen.io/AmateR/pen/VaWyjN/’>VaWyjN</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.

Run Animation in Reverse Direction or Alternate Cycles

The property specifies
whether an animation should be played forwards, backwards or in alternate
cycles.

The animation-direction property can have the following values:

— The animation is played as normal
(forwards). This is default
— The animation is played in
reverse direction (backwards)
— The animation is played
forwards first, then backwards
— The animation is played
backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

div {
width: 100px; height: 100px;
position: relative; background-color: red;
animation-name: example;
animation-duration: 4s; animation-direction:
reverse;}

The following example uses the value «alternate» to make the animation
run forwards first, then backwards:

Example

div {
width: 100px; height: 100px;
position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction:
alternate;}

The following example uses the value «alternate-reverse» to make the animation
run backwards first, then forwards:

Example

div { width: 100px; height: 100px;
position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction:
alternate-reverse;}