Animate.css Обзор

Animate.css существует уже несколько лет, и я должен признать, что опоздал на вечеринку. Я обнаружил это всего пару месяцев назад, когда искал в сети некоторые уроки по анимации CSS и нашел, что должно быть самым быстрым и простым способом анимации вокруг, Animate.css.

Созданный парнем по имени Дэн Иден, Animate.css — это быстрый способ увидеть, как работает CCS, и получить анимацию на вашем сайте.

Описанный как «Просто добавь водяную CSS-анимацию», Animate.css немного забавен с серьезной стороны. Это позволяет даже любителям веб-дизайна, таким как я, быстро освоить основы CSS-анимации и создавать простые, но эффективные эффекты для веб-сайтов. Этот инструмент может сделать это от одного анимированного заголовка до более сложных движений.

Animate.css обзор-2

Animate.css

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

Вам не нужно загружать всю библиотеку, если вы этого не хотите, поскольку в ней содержится 2500 строк кода. Вы можете посетить сайт Animate.css, найти анимацию и щелкнуть ссылку Download Animate.css. Он загружает класс на веб-страницу, которую вы можете скопировать и использовать по своему усмотрению.

Тем не менее, проще использовать GitHub и углубиться в поиски нужного эффекта.

  1. Перейдите на страницу css GitHub.
  2. Нажмите на ссылку Источник, чтобы получить доступ к списку элементов.
  3. Выберите тип эффекта, который вы ищете, из списка. Bounce — это средство для привлечения внимания, поэтому выберите ссылку Внимание_поискателям.
  4. Выберите bounce.css.
  5. Скопируйте код и поместите его на свою страницу, чтобы применить анимацию.

Это действительно настолько просто. Очевидно, вы бы выбрали разные варианты для разных эффектов, но конечный результат один и тот же. Доступ к коду необходим, чтобы сделать тяжелую работу на странице.

Animate.css обзор-3

Создание анимированного объекта с помощью Animate.css

Создать что-то классное с Animate.css просто. Нужно просто найти код CCS и добавить его в свой собственный CSS. Если я могу это сделать, любой может!

Первый параметр на странице Animate.css — это bounce, поэтому давайте воспользуемся этим в этом примере.

  1. Вставьте inside ’внутри таблицы стилей.
  2. Найдите CSS для нужной анимации и добавьте его к элементу, который вы хотите анимировать. Например, добавить ‘
    ’, Чтобы добавить этот эффект отскока для тестирования, изображения или чего-то еще.
  3. Добавьте следующий код CSS, чтобы все это работало. Взято из bounce.css выше.

@keyframes bounce {

от, 20%, 53%, 80%, до {

функция синхронизации анимации: кубический Безье (0,215, 0,610, 0,355, 1000);

transform: translate3d (0,0,0);

}

40%, 43% {

функция синхронизации анимации: кубический Безье (0,755, 0,050, 0,855, 0,060);

transform: translate3d (0, -30px, 0);

}

70% {

функция синхронизации анимации: кубический Безье (0,755, 0,050, 0,855, 0,060);

transform: translate3d (0, -15px, 0);

}

90% {

transform: translate3d (0, -4px, 0);

}

}

.отскок {

имя-анимации: отскок;

источник трансформации: нижний центр;

}

Развивая анимацию с Animate.css

Приведенная выше последовательность добавляет эффект отказов при первой загрузке страницы, что круто, но одноразово. Как насчет того, чтобы добавить его в hover. Таким образом, всякий раз, когда кто-то наводит курсор на тест, он отскакивает. Это не то, что я бы делал на производственном веб-сайте, но это отличный способ продемонстрировать, как все работает.

Добавьте следующий код в CSS, чтобы добавить эффект отскока при наведении. Каждый раз, когда мышь наводит курсор на элемент, он должен подпрыгивать.

.animated: hover {

-продолжительность webkit-animation: 1 с;

-длительность анимации: 1 с;

-ms-animation-duration: 1 с;

-o-анимация-длительность: 1 с;

продолжительность анимации: 1 с;

-webkit-animation-fill-mode: оба;

-moz-animation-fill-mode: оба;

-ms-animation-fill-mode: оба;

-o-animation-fill-mode: оба;

анимация-режим заполнения: оба;

}

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

Я не знаю, сколько бы я использовал на живом веб-сайте, потому что они не всегда бывают слишком плохими, а мобильным пользователям они совсем не нравятся. Тем не менее, как урок о том, как работает CSS и как его можно использовать для улучшения Интернета, это отличный ресурс. Я только начинающий, но даже потратить пару часов на Animate.css для этого урока меня многому научило. Я думаю, что я буду играть с этим намного больше, прежде чем я закончу. Как насчет тебя?

Ссылка на основную публикацию
Adblock
detector