Статья Библиотека animate.css

Saivior

Интересующийся

Saivior

Интересующийся
Статус
Оффлайн
Регистрация
20 Июн 2019
Сообщения
14
Реакции
8
Что такое animate.css? Animate.css — это библиотека готовых кроссбраузерных анимаций для использования в ваших веб-проектах.
Отлично подходит для выделения, домашних страниц, ползунков и подсказок, привлекающих внимание.

Подключение и использование

Рассмотрим дефолтное подключение через HTML тэг link:

HTML:
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

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

Создадим простую html страницу:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"> <!-- Подключаем стили CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <-- Подключаем нашу библиотеку animate.css -->
    <title>Animate</title>
</head>
<body>
    <section class="header">
        <div class="title">Animate.css</div> <-- Создаём текстовый блок с классом title -->
    </section>
</body>
</html>

Переходим в наши стили CSS:

CSS:
html, body /*Убираем отступы*/
{
    margin: 0;
    padding: 0;
}

.header /*Выравниваем наш блок по центру и добавляем небольшой отступ сверху*/
{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 80px;
}

.title
{
    font-family: Arial;
    font-size: 30px;
    animation: bounce; /*Добавляем нашу анимацию*/
    animation-duration: 2s; /*Устанавливаем время работы нашей анимации*/
    animation-iteration-count: infinite; /*С этим параметром анимация будет проигрывается бесконечно, а animation-duration в этом случае будет регулировать плавность анимации*/
}

В итоге мы получаем такой эффект:

Desktop 2022.04.08 - 13.19.06.01.gif


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