Animate.css существует уже несколько лет, и я должен признать, что опоздал на вечеринку. Я обнаружил это только пару месяцев назад, когда искал в сети некоторые уроки по анимации CSS и нашел, что должно быть самым быстрым и простым способом анимации вокруг, Animate.css.
Созданный парнем по имени Дэн Иден, Animate.css - это быстрый способ увидеть, как работает CCS, и получить анимацию на вашем сайте.
Описанный как «Просто добавь водяную CSS-анимацию», Animate.css немного забавен с серьезной стороны. Это позволяет даже любителям веб-дизайна, таким как я, быстро освоить основы CSS-анимации и создавать простые, но эффективные эффекты для веб-сайтов. Этот инструмент может сделать это от одного анимированного заголовка до более сложных движений.
Animate.css
Animate.css доступен для загрузки с GitHub и представляет собой библиотеку простых CSS-эффектов, собранных в одном месте. Каждая анимация красиво упакована и готова к использованию. Все, что вам нужно сделать, это найти понравившуюся вам анимацию и применить класс. Это действительно все, что нужно сделать.
Вам не нужно загружать всю библиотеку, если вы этого не хотите, поскольку в ней содержится 2500 строк кода. Вы можете посетить сайт Animate.css, найти анимацию и щелкнуть ссылку Download Animate.css. Он загружает класс на веб-страницу, которую вы можете скопировать и использовать по своему усмотрению.
Тем не менее, проще использовать GitHub и углубиться в поиски нужного эффекта.
- Перейдите на страницу css GitHub.
- Нажмите на ссылку Источник, чтобы получить доступ к списку элементов.
- Выберите нужный тип эффекта из списка. Bounce - это средство для привлечения внимания, поэтому выберите ссылку Внимание_поискателям.
- Выберите bounce.css.
- Скопируйте код и поместите его на свою страницу, чтобы применить анимацию.
Это действительно настолько просто. Очевидно, вы бы выбрали разные варианты для разных эффектов, но конечный результат один и тот же. Доступ к коду необходим, чтобы сделать тяжелую работу на странице.
Создание анимированного объекта с помощью Animate.css
Создать что-то классное с Animate.css просто. Это просто вопрос поиска кода CCS и добавления его в свой собственный CSS. Если я могу это сделать, любой может!
Первый параметр на странице Animate.css - это bounce, поэтому давайте воспользуемся этим в этом примере.
- Вставить ' внутри в вашей таблице стилей.
- Найдите CSS для нужной анимации и добавьте его к элементу, который вы хотите анимировать. Например, добавить добавить этот эффект отскока, чтобы проверить, изображение или что-то еще.
- Добавьте следующий код 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);
}
}
.bounce {
имя-анимации: отскок;
источник трансформации: нижний центр;
}
Развивая анимацию с Animate.css
Приведенная выше последовательность добавляет эффект отказов при первой загрузке страницы, что круто, но одноразово. Как насчет того, чтобы добавить его в hover. Таким образом, всякий раз, когда кто-то наводит курсор на тест, он отскакивает. Это не то, что я бы сделал на производственном веб-сайте, но это отличный способ продемонстрировать, как все работает.
Добавьте следующий код в CSS, чтобы добавить эффект отскока при наведении. Каждый раз, когда мышь наводит курсор на элемент, он должен подпрыгивать.
.animated: hover {
-webkit-animation-duration: 1 с;
-moz-animation-duration: 1 с;
-ms-animation-duration: 1 с;
-о-анимация-длительность: 1 с;
продолжительность анимации: 1 с;
-webkit-animation-fill-mode: оба;
-moz-animation-fill-mode: оба;
-ms-animation-fill-mode: оба;
-o-animation-fill-mode: оба;
анимация-режим заполнения: оба;
}
Если вы знаете CSS, вы будете гораздо лучше меня знать о том, как применять различные эффекты к различным действиям. Как новичок, эта библиотека и библиотеки, предоставленные в Animate.css, помогают мне создавать простые, но эффективные анимации для моих веб-страниц.
Я не знаю, сколько бы я использовал на живом веб-сайте, потому что они не всегда бывают слишком плохими, а мобильным пользователям они совсем не нравятся. Тем не менее, как урок о том, как работает CSS и как его можно использовать для улучшения сети, это отличный ресурс. Я только начинающий, но даже потратить пару часов с Animate.css для этого урока меня многому научило. Я думаю, что я буду играть с этим намного больше, прежде чем я закончу. Как насчет тебя?
