и всё! Давайте посмотрим как это выглядит в действительности.

Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице.

1	<div class = "toSmallWidth" >

А вот что находится в файле стилей:

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

.toSmallWidth { margin : 20px auto ; /*внешние отступы сверху и снизу по 20px и выравнивание по середине*/ background : red ; /*красный фон у блока*/ height : 100px ; /*высота блока 100px*/ width : 800px ; /*начальная ширина 800px*/ -webkit-animation-name : animWidthSitehere; -webkit-animation-duration : 5s; /* свойство с префиксом для браузеров Chrome, Safari, Opera */ animation-name : animWidthSitehere; /* указываем название ключевых кадров (находятся ниже)*/ animation-duration : 5s; /*задаем длительность анимации*/ } /* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere { from { width : 800px ; } to { width : 100px ; } } @keyframes animWidthSitehere { from { width : 800px ; } /*первый ключевой кадр, где ширина блока 800px*/ to { width : 100px ; } /*последний ключевой кадр, где ширина блока 100px*/ }

Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически.

Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал.

3. Примеры анимации CSS3 посложнее

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

3 урока по анимации CSS (преобразования)

Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS.

| 18.02.2016

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

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

Color:hover { background:#53ea93; }

2. Появление рамки

Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:

Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }

3. Свинг

Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

• @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
• animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

@-webkit-keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(9px); transform: translateX(9px); } 30% { -webkit-transform: translateX(-9px); transform: translateX(-9px); } 40% { -webkit-transform: translateX(6px); transform: translateX(6px); } 50% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 65% { -webkit-transform: translateX(3px); transform: translateX(3px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .swing:hover { -webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

4. Затухание

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

Fade { opacity: 1; } .fade:hover { opacity: 0.6; }

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

7. Трансформация в круг

Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:

Circle:hover { border-radius: 70%; }

8. Вращение

Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer	Поддерживается версией IE 10 и выше
Chrome	Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox	Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera	Поддерживается с версии 12.1
Safari	Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)

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

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.

Итак, переходы в CSS являются специфическим видом анимации, где:

• есть только два состояния: начало и конец;
• анимация не зациклена;
• промежуточные состояния управляются только функцией времени.

Но что если вы хотите:

• иметь контроль над промежуточными состояниями?
• зациклить анимацию?
• сделать разные виды анимаций для одного элемента?
• анимировать определённое свойство только на половину пути?
• имитировать различные функции времени для разных свойств?

Анимация в CSS позволяет всё это, и не только.

Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

Свойства анимации

Как и transition , свойство animation является сокращённым для нескольких других:

• animation-name : название анимации;
• animation-duration : как долго длится анимация;
• animation-timing-function : как вычисляются промежуточные состояния;
• animation-delay : анимация начинается спустя некоторое время;
• animation-iteration-count : сколько раз должна выполняться анимация;
• animation-direction : должно движение идти в обратную сторону или нет;
• animation-fill-mode : какие стили применяются до начала анимации и после её завершения.

Быстрый пример

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

@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); } 100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); } } .loading-button { animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; }

Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её .

Я использовал сокращенное свойство animation и включил все возможные варианты:

• animation-name: bouncing (совпадает с названием ключевых кадров)
• animation-duration: 0.5s (полсекунды)
• animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
• animation-delay: 0s (без задержки)
• animation-iteration-count: infinite (воспроизводится бесконечно)
• animation-direction: alternate (идёт назад и вперёд)
• animation-fill-mode: both

@keyframes

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

• 0% - первый шаг анимации;
• 50% - шаг на полпути в анимации;
• 100% - последний шаг.

Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.

Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

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

Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием :

@keyframes around { 0% { left: 0; top: 0; } 25% { left: 240px; top: 0; } 50% { left: 240px; top: 140px; } 75% { left: 0; top: 140px; } 100% { left: 0; top: 0; } } p { animation: around 4s linear infinite; }

Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

animation-name

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

• при написании анимации с помощью @keframes ;
• при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).

@keyframes whatever { /* ... */ } .selector { animation-name: whatever; }

Подобно именам классов CSS, название анимации может включать в себя только:

• буквы (a-z);
• цифры (0-9);
• подчёркивание (_);
• дефис (-).

Название не может начинаться с цифры или с двух дефисов.

animation-duration

Как и длительность перехода , длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

Selector { animation-duration: 0.5s; }

Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

animation-timing-function

Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова , такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье .

Selector { animation-timing-function: ease-in-out; }

Значение по умолчанию: ease .

Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.

animation-delay

Как и с задержкой перехода , задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

По умолчанию равно 0s, что означает отсутствие любой задержки.

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

A, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }

animation-iteration-count

По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:

• целые числа, вроде 2 или 3;
• дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
• ключевое слово infinite , которое будет повторять анимацию бесконечно.

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

animation-direction

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

• normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
• reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
• alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
• alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.

Это легче представить, если счётчик итераций анимации установлен как infinite .

animation-fill-mode

Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .

Давайте представим себе кнопку , которая является:

• красной по умолчанию;
• становится синей в начале анимации;
• и в итоге зелёной , когда анимация завершена.

До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

CSS transitions

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

При наведении курсора на квадрат плавно изменяется цвет фона.

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

• transition-property;
• transition-duration;
• transition-timing-function;
• transition-delay;
• transition;

transition-property - указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

Transition-property: width;

transition-duration - задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

Transition-duration: 1s;

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

Transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay - задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

Transition-delay: 500ms;

transition - это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

Transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

• animation-name;
• animation-duration;
• animation-timing-function;
• animation-delay;
• animation-iteration-count;
• animation-direction;
• animation-play-state;
• animation-fill-mode;
• animation;

animation-name - здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

Animation-name: my-animation; @keyframes my-animation { 0% { opacity: 0; } 100% { opacity: 1; } }

animation-iteration-count - задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

Animation-iteration-count: 2;

animation-direction - задаёт направление анимации.

Animation-direction: reverse;

animation-play-state - данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

Animation-play-state: paused;

animation-fill-mode - устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

• none - анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
• forwards - анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
• backwards - анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
• both - анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

Animation-fill-mode: backwards;

Свойства animation-duration , animation-timing-function , animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример - это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

• motion-path;
• motion-offset;
• motion-rotation;

motion-path - это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

Motion-path: path("M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z");

motion-offset - это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

@keyframes airplane-fly { 0% { motion-offset: 0; } 100% { motion-offset: 100%; } }

motion-rotation - это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах ("-45deg", "30deg" и т.д).

Motion-rotation: auto;

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

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

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

Раньше для реализации этих эффектов, приходилось использовать только лишь JS, но развитие не стоит на месте и с выходом CSS3 все эти эффекты можно реализовать на нем.

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

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

А теперь давайте более детально познакомимся с animate.css .

Базовая HTML разметка

Смотреть видеоурок

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

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

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

Но что делать если вам нужно чтобы анимация продолжалась без остановки?

Для этого достаточно добавить еще один класс для нашего анимируемого элемента. Это класс – infinite .

Заголовок

Задаем анимацию при наведении мыши на элемент

Смотреть видеоурок

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

HTML

HTML разметка у нас немного поменялась, теперь нам не надо задавать класс, который отвечает за конкретную анимацию. Это значение нам нужно указывать в специальном атрибуте data-effect . Обратите на это внимание, это очень важно.

Заголовок

Вот небольшой код на jQuery , который будет отслеживать событие наведения курсора мыши на элемент и в случае возникновения данного события, скрипт добавит к нему класс, значение которого прописано в атрибуте data-effect . За счет добавления этого класса будет применена анимация.

Function animate(elem){ var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function(){ elem.removeClass(effect); }, 1000); } $(".animated").mouseenter(function() { animate($(this)); });

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

Делаем анимацию при прокрутке страницы

Смотреть видеоурок

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

А именно вы можете задавать различные эффекты для элементов при прокрутке страницы. Для этих целей помимо animate.css , нам потребуется еще специальный скрипт wow.js .