20 марта 2020 CSS

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript.

И только то, что это CSS, не означает, что нет библиотек, которые могли бы вам помочь. Одной из них является библиотека Animate.css.

Что такое animate.css

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

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

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

Первый шаг для использования этой библиотеки после загрузки — добавить файл CSS в HTML-код:

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

Здесь вы можете просмотреть примеры и названия всех анимаций содержащихся в библиотеке. Например:

Hello

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

Это замечательно, но обычно требуется анимировать нажатие кнопок или когда пользователь выполняет какие-то действия. Для этого вам нужно воспользоваться небольшим кодом JavaScript, чтобы вызвать событие click и добавить классы к вашему элементу.
Представьте себе этот HTML:

Click

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur a felis in nunc fringilla tristique. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.

Например вы хотите сделать эффект появления текста при нажатии кнопки.

Сначала вы задаете блоку с текстом непрозрачность 0. Затем динамически добавляете классы с помощью JS:

$('button').click(function() {
    $('section').addClass('animated fadeInLeft');
});

Изменить скорость анимации в CSS, можно например, так:

.animated {
  -webkit-animation-duration: 200ms;
  -moz-animation-duration: 200ms;
  animation-duration: 200ms;
}

Вы также можете изменить задержку анимации и количество ее воспроизведений, используя animation-delay и animation-iteration-count.

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

$('section').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $('section').addClass('delay fadeOutRight');
});

Что касается CSS, все, что вам нужно сделать, это добавить класс delay:

.delay {
        -animation-delay: 2s;
        -webkit-animation-delay: 2s;
        -moz-animation-delay: 2s;
}

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

Заключение

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