< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Приятные полезности для сайта » CSS анимация на сайте посредством библиотеки Animate.css

CSS анимация на сайте посредством библиотеки Animate.css

CSS анимация на сайте посредством библиотеки Animate.css

Пост был обновлен: Мар 23, 2017

Здравствуйте дорогие друзья! Сегодня поговорим на очень актуальную тему в верстке — анимация. Честно сказать такое видел в интернете, и я даже не подозревал, что это все возможно используя чистый css3 без использования java скриптов. Вот в данной статье хочу поделиться с вами как сделать различные эффекты на сайте, используя css3, не обладая при этом достаточными знаниями в css-анимации. Поможет нам в этом библиотека animate.css.

До сих пор анимацию в css, вернее стили для анимации писал сам, пользуясь различными справочниками, типа htmlbook.ru. Но однажды наткнулся на сайт https://daneden.me/animate, где собраны уже готовые различные эффекты на css. Бери и применяй.

Для нашего выбора имеется две версии данной библиотеки:

Полная версия — имеет огромное количество строк кода. Подойдет тем, кто хочет детально изучить анимацию, поскольку код легко читаем. Объем файла составляет ~60 Кб.

Сжатая версия (обфусцированная) — представляет собой полную версию, но сжатую до минимума. Сжатие происходит за счет вырезания символов табуляции, пробелов, переносов строк, комментариев. Объем сократился почти в полтора раза, но разобраться в коде будет очень затруднительно. Объем файла составляет ~50 Кб.

Как вы заметили, проект добавлен на GitHub.

Итак, как же заставить анимацию работать после скачивания файлов? Все, что нам необходимо это подключить файл стилей

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

и добавить нужному блоку два класса — animated и второй класс в зависимости от того, какой эффект используете.

<div class="logo animated slideInLeft"> Логотип сайта </div>

Давайте посмотрим на пример. В данном случае я использовал анимацию — slideInLeft.

Я использовал один эффект, поэтому мне хватило кусочка кода, который отвечает именно на данную анимацию. Я скачал на GitHub все файлы данной библиотеки и подключил из папки «Source» нужный мне эффект, далее в свой файл стилей я добавил следующий код:

/*************** ANIMATED ****************/
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

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

Читайте также:  Masonry Layout - кирпичный эффект элементов на сайте. Документация на русском языке

Можно также задать эффект и при наведении курсора мыши.

Достаточно было добавить псевдокласс «hover» классу используемого эффекта:

.pulse:hover {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -o-animation-name: pulse;
    animation-name: pulse;
}

Также можно используя java скрипт, сделать так, чтобы при наведении курсора класс добавлялся, а при отводе мыши снова удалялся. Здесь придется еще подключить дополнительно библиотеку jQuery, но если она у вас уже подключена, то второй раз подключать ее не нужно.

Можно также совместить несколько эффектов. Вот что получилось:

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

.animated {
-webkit-animation-duration: 1s; /* Время анимации */
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;

-webkit-animation-delay: 1s; /* Время задержки */
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

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

Ну что скажете коллеги? Как вам такой подход?

Пост был обновлен: Мар 23, 2017

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (3 оценок, среднее: 3,33 из 5)
Загрузка...

Проверка орфографии

Система Orphus

2 комментария к статье "CSS анимация на сайте посредством библиотеки Animate.css"

  • Имран Окт 29, 2013 в 23:19

    Отличная библиотека анимаций, недавно начал использовать на сайтах. Экономит очень много времени )). Вот и ссылка на аккаунт автора этой библиотеки https://twitter.com/_dte .

    • Заур Магомедов
      Заур Магомедов Окт 30, 2013 в 8:15

      Ссылка на аккаунт твиттера будет весьма кстати.

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]