—»     —»   Animate.css: CSS3-библиотека для простого создания анимаций
  Раздел: Анимация   Нет комментариев  

Animate.css: CSS3-библиотека для простого создания анимаций



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

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

Animate.css: CSS3-библиотека для простого создания анимаций

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

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

Приступаем к работе

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

По умолчанию, Animate.css будет анимировать элементы только при загрузке первой страницы. После чего все будет оставаться статичным. Чтобы иметь возможность контролировать анимацию, мы все-таки воспользуемся небольшим трюком на javascript. Именно поэтому нам нужно будет включить в проект jQuery.

<head>
...
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>

HTML-разметка

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

<div class="option animated wobble">This text will animate.</div>

И на этом все! Анимация будет реализована только при загрузке страницы, поэтому вам может понадобиться javascript, чтобы иметь возможность запускать анимацию когда вам этого захочется. Кстати, класс .option также можно отредактировать по собственному усмотрению.

Дополнительные CSS-опции

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

Чтобы анимация запускалась несколько раз или продолжалась бесконечно, вы можете воспользоваться атрибутом animation-iteration-count. Также не забудьте включить необходимые браузерные префиксы типа webkit, moz, и так далее. Чтобы анимация была бесконечной, в качестве значения добавьте infinite.

Если вам нужно, чтобы она проиграла несколько раз, то просто внести нужное вам значение.

-vendor-animation-iteration-count: infinite | <number>;

Чтобы отредактировать продолжительность, то вам следует воспользоваться атрибутом animation-duration; в то время как animation-delay отвечает за задержку. Предлагаем вам наглядный пример кода.

.option {  
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}

Управление при помощи javascript

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

<div class="demo animated">
<p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>

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

С помощью javascript вы можете определять названия анимации. Мы воспользуемся подходом, подразумевающим создание функции animate, и назовем анимацию тем же названием, что и класс элемента (в вышеприведенном коде мы использовали атрибут demo).

А javascript-код будет выглядеть следующим образом:

<script language="javascript">
$(function() {
$("#ref").click(function() {
animate(".demo", 'bounce');
return false;
});
});

function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>

Эффект анимации, все-таки, можно считать одним из лучших способов сделать ваши страницы более привлекательными, однако важно не переусердствовать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5684   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2017    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031