Animate.Css – CSS3 Библиотека для создания анимации


Содержание

Dobrovoi Master

20+ Бесплатных библиотек CSS анимаций

Сегодня мы рассмотрим лучшие библиотеки анимаций CSS, которые помогут вам создать потрясающие эффекты для различных элементов вашего сайта.
Несомненно анимация добавляет движухи в интернет пространство, сайты где используются эффекты анимации, оживают поднимаясь на уровень выше, главное не переусердствовать, а использовать анимацию там где она будет выглядеть логично, не стоит навешивать эффектные плюшки на каждую закорючку интерфейса.
Наверняка, вы часто слышали термины «переход» и «трансформация»? Переходы CSS — это плавное изменение одного состояния элемента на другое, при наступлении определенного события, которое назначается соответствующим псевдоклассом, например при наведении :hover .

На данный момент мы можем использовать анимацию CSS для любых элементов, а также псевдоэлементов :before и :after . При этом, не стоит забывать, что, например, псевдокласс :hover не работает на некоторых мобильных устройствах, например, таких как iPhone или Android.

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

1. MOTION UI

Motion UI — это библиотека Sass для быстрого создания переходов и анимаций CSS, изначально связанная с Foundation for Apps, затем выделенная в отдельный проект, который был запущен раньше чем запустили Foundation for Sites 6.
При просмотре демо кликайте на класс и смотрите анимацию Yeti!

2. Animista

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

3. Animate.css

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

4. Vivify

Vivify — Относительно новая и абсолютно бесплатная библиотека CSS-анимации. Работать с этой библиотекой очень просто, скачиваете, заливаете к себе на сайт, подключаете файл vivify.min.css к документу, добавляете класс vivify к элементу, который вы хотите оживить, здесь же прописываете имя класса соответствующего тому или иному виду анимации и всё, любуетесь результатом. Вся необходимая инфа по подключению и список имен классов упакована в архив.

5. Woah.css

Библиотека Woah.css позволяет применять эксцентричные, эффектные и в чём то даже сумасшедшие, анимации CSS3 для любых элементов html. Подобно Animate.css, библиотека проста в использовании и легко модернизируется.

6. Hexa

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

7. Magic Animations

Magic Animations — небольшая библиотека анимации специальных эффектов CSS3.

8. CssAnimation

Cssanimation.io — Современная, управляемая библиотека эффектных анимаций CSS3, для работы с которой, достаточно базовых знаний HTML и CSS3. Подробнейшая документация представлена в репозитории проекта на GitHub.

9. CSShake

CSShake — это проект, полностью написанный в CSS, который обеспечивает серию довольно таки специфичных анимаций, в виде различных вариантов эффектов дрожи или тряски, применимых практически ко всем элементам DOM.

10. All Animation Css3

Вся библиотека представляет собой фреймворк css3, созданный с упором на анимацию 3D и кросс-браузерность. Недавно было выпущено обновление всей библиотеки анимации, в которую были добавлены несколько новых анимированных компонентов, выполненных в CSS3 / Stylus.

11. Effeckt.css

Большая библиотека эффектных переходов и анимаций CSS, для различных элементов сайта.

12. Tuesday

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

13. Morf.js

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

14. Ceaser

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

Топ 9 библиотек для анимации в 2020 году

Дата публикации: 2015-12-29

От автора: современный интернет заполонен удивительно, привлекающей внимание анимацией. Сегодня у веб-разработчиков имеется широкий набор инструментов для привлечения внимания, развлечения, информирования и направления пользователей, а анимация лишь помогает нам в достижении этой цели.

Еще 10 лет назад, чтобы добавить сайту интерактивности, разработчики использовали Adobe Flash. Однако с быстрым развитием HTML5, CSS3 и мириад JS библиотек Flash на данный момент отошел на задний план (к счастью?). 2015 год был богат на бесплатные библиотеки для анимации, и сегодня я расскажу про 9 библиотек и сделаю упор на простоту использования, возможности и общую популярность.

Animate.css

Animate.css – одна из самых простых в использовании CSS библиотек для анимации. Добавить библиотеку так же просто, как обычный CSS класс к HTML элементу. Также можно использовать JQuery для вызова анимации по определенным событиям.

Создатель: Daniel Eden

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Дата выпуска: 2013

Текущая версия: 3.4.0

Популярность: 25,000+ звезд на GitHub

Описание: «Кроссбраузерная библиотека CSS анимации. Очень проста в использовании.»

Размер библиотеки: 55.2 Кб

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

Bounce.js

Bounce.js – инструментарий и JS библиотека, основной фокус которой расположен на уникальной анимации гибких объектов с помощью CSS.

Дата выпуска: 2014

Текущая версия: 0.8.2

Популярность: 3,500+ звезд на GitHub

Описание: «Создавайте красивую CSS3 анимацию мгновенно.»

Размер библиотеки: 16 Кб

Bounce.js – элегантная анимационная библиотека, поставляемая с десятью заранее сохраненными шаблонами, что обеспечивает маленький размер файла. Как и в animate.css анимация выглядит плавно и безупречно. Если вам не нужен всеобъемлющий список типов анимации и если вы ищите легковесную библиотеку, то данный экземпляр можно положить к себе в копилку.

Magic Animations

Magic Animations – одна из самых впечатляющих библиотек. В ее арсенале огромный набор различных анимаций, многие из которых уникальны. Как в случае с Animate.css, для подключения библиотеки необходимо всего лишь подключить CSS файл. Также можно использовать анимацию через JQuery. У проекта отличное демо.

Дата выпуска: 2014

Текущая версия: 1.1.0

Популярность: 3,400+ звезд на GitHub

Описание: «CSS3 анимация с особенными эффектами.»

Размер библиотеки: 36,5 Кб

Magic animations имеет довольно небольшой размер по сравнению с animate.css, и получила известность благодаря своей фирменной анимации, такой как эффекты magic, foolish и bomb. Если вы ищите что-то необычное, я бы точно порекомендовал вам воспользоваться данной библиотекой в вашем следующем проекте. Разочарованы вы не будете.

DynCSS

DynCSS – библиотека, хорошо сочетающаяся с параллакс эффектом. Чтобы полностью понять возможности библиотеки, взгляните на демо.

Создатель: Vittorio Zaccaria

Дата выпуска: 2014

Текущая версия: 0.8.1

Популярность: 190+ звезд на GitHub

Описание: «Оживите свой сайт при помощи динамической CSS анимации.»

DynCSS – простая библиотека, которая может стать очень популярной в недалеком будущем. На данный момент это довольно новый проект, как видно по количеству звезд на GitHub. Одна из особенностей данной библиотеки в эффекте вращения элементов одновременно с прокруткой. Данный эффект Vittorio прекрасно демонстрирует на домашней странице DynCSS (превосходно подходит под параллакс эффект).

CSShake

CSShake делает именно то, что написано на «коробке» — CSS библиотека для встряски элементов страницы. Как можно ожидать, есть множество разных эффектов встряски.

Дата выпуска: 2014

Популярность: 2,000+ звезд на GitHub

Описание: «CSS классы для перемещения элементов DOM!.»

Размер библиотеки: 78,8 Кб

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Apple ввела в моду эффект сильной встряски элементов пользовательского интерфейса при неправильном вводе пользователем данных (диалоговые окна, модальные или текстовые) – имитируя человеческое движение головой «нет». В CSShake целый набор интересных эффектов встряхивания, если не сказать полный.

Хотя библиотека на данный момент популярнее чем DynCSS, мне кажется, что размер не сопоставим с возможностями. Анимация выглядит превосходно, однако я не могу представить столько случаев, когда бы мне пришлось подключить еще одну библиотеку для нейтрализации тряски. Хотя может быть у меня просто плохое воображение?

Hover.css

Hover.css – CSS библиотека для анимации кнопок и других элементов пользовательского интерфейса вашего сайта. Среди анимации есть действительно хороший эффект 2D трансформации, а также и другие отлично сделанные эффекты.

Создатель: Ian Lunn

Дата выпуска: 2014

Популярность: 10,700+ звезд на GitHub

Описание: «Добавляйте анимацию своим элементам интерфейса, модифицируйте или используйте ее для вдохновления.»

Размер библиотеки: 104,2 Кб

Hover.css, как говорится на домашней странице библиотеки, отлично подходит для анимации кнопок, логотипов, SVG компонентов или встроенных изображений. Достаточно большой размер объясняется полным списком всевозможной анимации (хотя я все еще думаю, что библиотека могла бы быть более оптимизирована). Пожалуй самые известные эффекты это bubbles и curls.

Velocity.js

Velocity.js – сложная JS библиотека для создания таких эффектов анимации, как Fade & Slide, Scroll, Stop, Finish, Reverse и еще множества других эффектов. Огромный список компаний типа Tumblr, WhatsApp, MailChimp, Scribd, Gap и HTC, а также обычные пользователи используют данную библиотеку.

Создатель: Julian Shapiro

Дата выпуска: 2014

Текущая версия: 1.2.2

Популярность: 8,700+ звезд на GitHub

Описание: «Ускоренная JavaScript анимация.»

Размер библиотеки: 34,8 Кб

Velocity подойдет не всем, так как в ее основе лежит JavaScript анимация, а движок анимации использует схожее с JQuery API $.animate(). Работает библиотека как с JQuery, так и без него. Причина, по которой я включил библиотеку в этот список, это невероятная скорость и возможность анимировать цвета, трансформировать объекты, создавать циклы и функции зацикленности – лучше всего сочетается с JQuery и CSS свойством transition.

Цукерберг рекомендует:  Домен - Покупка домена и хостинга.

favico.js


Favico.js предназначена для крайне специфичных случаев: с ее помощью можно заменить стандартный фавикон на анимированный, анимированная иконка выбирается из массива. Веб-приложения, которым необходимо сообщать пользователям о новом контенте – т.е. новые твиты, email’ы, посты, статьи и т.д. – могут действительно выиграть от использования данной библиотеки. Чтобы более детально разобраться в возможностях фреймворка, посмотрите демо на их сайте.

Создатель: Miroslav Magda

Дата выпуска: 2013

Текущая версия: 0.3.9

Популярность: 4,900+ звезд на GitHub

Описание: «Замените свой фавикон на значок, изображение или видео.»

Размер библиотеки: 8,9 Кб

Favicon.js это больше чем просто библиотека для анимации фавиконов и добавления им значков, изображений и видео. Размер библиотеки хорошо оптимизирован для ее использования в проектах.

AniJS

Следующая наша библиотека интересна нам из-за ее уникального подхода. AniJS – библиотека, с помощью которой можно добавлять анимацию элементам в формате:

Если кликнуть на квадрат, выполнить анимацию для .container-box.

Дата выпуска: 2014

Текущая версия: 0.9.3

Популярность: 2,500+ звезд на GitHub

Описание: «Библиотека для улучшения веб-дизайна без дополнительного кодинга.»

Размер библиотеки: 10,5 Кб

AniJS — библиотека с отличным балансом размер-функционал. Формат применения может быть совершенно разный по сравнению с другими анимационными библиотеками (многие могут сказать, что подходы нешаблонны). Данную библиотеку стоит попробовать хотя бы один раз в своих проектах. Безусловно, данная библиотека не может тягаться с остальными, но у нее есть потенциал для роста в будущем.

Заключение

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

Автор: Tanay Pant

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

11 Javascript библиотек для анимации в 2020 году

Мы собрали 11 лучших библиотек для анимации в 2020 году, которые вы можете использовать при разработке своего приложения или веб-сайта.

Применение чистого CSS

Прежде чем рассмотреть библиотеки, давайте не будем забывать об использовании чистого CSS. Ведь чистый CSS отличается хорошей стандартизированностью, он может повысить производительность (GPU), обеспечить обратную и прямую совместимость, и это может быть самый эффективный способ создания анимаций. Вот пример десяти прекрасных анимаций созданных на CSS.

Three.js

Эта популярная библиотека — отличный способ создать 3D-анимацию в браузере, используя WebGL интуитивно понятным способом. Используя , , CSS3D и WebGL-рендереры, эта библиотека позволяет нам создавать богатый интерактивный опыт для всех устройств и браузеров. Впервые представленная в апреле 2010 года, библиотека по-прежнему разрабатывается и развивается.

Anime.js

Anime.js представляет собой библиотеку анимации JavaScript, которая работает с CSS-свойствами, отдельными CSS-преобразованиями, SVG или любыми атрибутами DOM и объектами JavaScript. Эта библиотека позволяет вам связывать несколько свойств анимации, создавать временные рамки и многое другое.

Эта библиотека представляет собой набор инструментов для создания видеороликов с простыми декларативными API-интерфейсами, совместимостью между устройствами и более 1500 модульных тестов. Вы можете перемещать вещи вокруг DOME или SVG DOME или создавать уникальные объекты mo.js.

Velocity

Velocity — это быстрый механизм анимации Javascript с тем же API, что jQuery $.animate(). Он включает в себя цветную анимацию, преобразования, смягчения, поддержку SVG и анимацию прокрутки.

Popmotion

Эта функциональная библиотека реанимаций весит всего 11kb. Popmotion позволяет разработчикам создавать анимации и взаимодействия с действиями, которые представляют собой потоки значений, которые можно запускать и останавливать, и создаются с помощью CSS, SVG, React и three.js.

Vivus

Vivus — это класс JavaScript с нулевыми зависимостями, который позволяет вам анимировать SVG, придавая им вид живой отрисовки. Вы можете использовать одну из многих доступных анимаций или создать собственный скрипт для рисования SVG.

GreenSock JS

GSAP — это библиотека JavaScript для создания высокопроизводительных нулевых зависимостей, кросс-браузерных анимаций, которые, как утверждается, используются на более чем 4 миллионах веб-сайтов. GSAP является гибким и работает с React, Vue, Angular и Vanilla JS.

Scroll Reveal

Эта библиотека обеспечивает легкую анимацию прокрутки для веб-браузеров и мобильных браузеров, а также анимирует элементы во время прокрутки. Scroll Reveal поддерживает множество аккуратных типов анимация и позволяет создавать собственные.

Hover (CSS)

Это CSS-библиотека. Hover — сборка эффектов наведения на CSS3, которые будут применяться к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д. Эффекты доступны на CSS, Sass и LESS. Вы можете копировать и вставлять эффект, который вы хотите использовать в своей таблице стилей, или ссылаться на таблицу стилей библиотеки.

Typed.js

Эта библиотека позволяет создавать анимации набора текста на различной скорости. Эта библиотека пользуется популярностью и на удивление полезна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Создание анимации с Animate.css

Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков, приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) — создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут ознакомиться с ней и использовать в своих проектах.

«При реализации нескольких своих проектов я работал с анимацией CSS3 по ключевым кадрам и заметил, что повторяю код. Чтобы не делать это в будущем я начал создавать анимационную библиотеку. После завершения я был доволен собой и выпустил код на GitHub, где его и можно взять».

Как же на практике применять библиотеку Animate.css? В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

1. Для начала следует скачать и подключить библиотеку.

  • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит для первого этапа ознакомления с анимацией в целом, поскольку позволяет разобраться в том, как это всё устроено.
  • Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.

Далее подключаем файл animate.css через тег
как это делается с любым другим стилевым файлом.

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта. Например, вы хотите добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:

Вот некоторые классы для использования на ваших сайтах:

Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.

3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).

Пример 1. Всплывающее сообщение

Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу добавляем класс animated и подключаем jQuery (пример 2).

Пример 2. Галерея

В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.

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

Стоит отметить, что эффекты, представленные в Animate.css удобнее, быстрее и изящнее, чем некоторые из аналогичных в JavaScript. И если вы хотите получить несколько быстрых эффектов, Animate.css – отличный выбор.

Полный список классов:

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

Скрипт wow.js облегчает работу. Ведь теперь нам не надо будет писать и копаться в js-коде. WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

wow.min.js (8kb)

wow.js (15kb)

Или подключаем внешний cdn вариант:

Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:

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

Выбираем элемент, который хотим анимировать и добавляем ему класс , вместе с классом анимации:

Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов :

В примере задано, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.

Цукерберг рекомендует:  Чпу - Доступ к массивам $_SESSION и $_COOKIES при внедрении ЧПУ.

Настройки WOW.js анимации через атрибуты


data-wow-duration – указываем время проигрывания анимации

data-wow-delay – ставим задержку перед проигрыванием анимации

data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана

data-wow-iteration – количество повторов анимации

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

Как добавит анимацию в WordPress можно узнать здесь:

16 инструментов и фреймворков CSS анимации

1. Animate.css

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

2. Stylie

Stylie – веб-инструмент CSS3 анимации, который вы можете использовать для настройки и создания собственного набора анимаций.

3. animo.js

animo.js – мощный инструмент для управления CSS анимациями. Вы можете легко сгруппировать анимации, чтобы вызывать одну за другой, указав функции обратного вызова для завершения анимации, или просто вызывать по любому событию или в любой момент, когда пожелаете.

4. Anima

Легкий (только 5 Кб в gzip) Anima позволяет анимировать несколько объектов одновременно. А для каждого элемента может быть задана его масса и вязкость для эмуляции объектов из реального мира. Для создания анимации он использует CSS и 3D преобразования совместно с JavaScript.

5. Rocket

Rocket – простой инструмент для создания веб анимаций.

6. CSShake

CSShake – это коллекция CSS классов, которые заставят DOM трястись и вибрировать.

7. Magic Animations

Magic Animations – маленькая библиотека эффектов анимации на CSS3.

8. Hover.css

Hover.css – подбор анимированных CSS3 эффектов при наведении на кнопки.

9. Saffron

Saffron – библиотека SASS миксинов для простых анимаций и переходов CSS3.

10. CSSynth

CSSynth – небольшое веб-приложение для редактирования порядка запуска анимаций.

11. Ceaser

Ceaser – простой инструмент упрощения работы с CSS анимацией, который вы легко можете использовать в своих проектах.

12. Tridiv

Tridiv – веб-редактор, который позволит вам создавать 3D фигуры с помощью CSS. Кроссбраузерный. Перед использованием можно просмотреть несколько онлайн-примеров.

13. Morf.js

Morf.js – обходной путь на JavaScript, который позволяет создавать CSS3 переходы с пользовательскими эффектами с использованием аппаратного ускорения.

14. CSS3 Keyframes Animation Generator

CSS3 Keyframes Animation Generator, как и предполагает название, это онлайн-инструмент, который позволяет создавать CSS3 анимации, используя ключевые кадры.

15. Effeckt.css

Библиотека Effeckt.css предлагает множество анимаций и переходов, которые вы можете использовать в своих веб-проектах.

16. Шпаргалка CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet – набор готовых CSS3 анимаций, которые мы можете использовать в своих веб-проектах, добавив стили на свой сайт и применив готовые CSS классы к элементам.

Знакомство с анимацией в CSS3: гайд для начинающих

Анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.

Чтобы использовать анимацию в проекте, нужно сделать две вещи:

  1. Создать анимацию.
  2. Связать её с анимируемым элементом и указать нужные свойства.

Анимация — это набор ключевых кадров, или кейфреймов, хранящихся в CSS:

Давайте разберём, что здесь происходит. Ключевое слово @keyframes обозначает саму анимацию. Затем идёт имя анимации, в нашем случае — test-animation . В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to ).

Взгляните на код ниже. Анимацию можно задать и так:

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

В данном примере, как и в дальнейших, для наглядности добавлены несколько строк JavaScript-кода, которые подключают/отключают класс с анимацией к элементу. Просто нажмите на него, чтобы воспроизвести анимацию:

Helastel, удалённо, от 150 000 ₽

Подключить анимацию к элементу можно так:

Свойство animation-name задаёт имя для анимации @keyframes . Правило animation-duration задаёт длительность анимации в секундах ( 3s , 65s , .4s ) или миллисекундах ( 300ms , 1000ms ).

Вы можете группировать кейфреймы:

К одному элементу можно применить несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:

Задержка анимации

Свойство `animation-delay` задаёт задержку перед воспроизведением анимации в секундах или миллисекундах:

Повторное воспроизведение анимации

При помощи свойства `animation-iteration-count` можно указать число повторов анимации: 0, 1, 2, 3, … — или `infinite` для зацикливания:

Состояние элемента до и после анимации

Свойство `animation-fill-mode` указывает, в каком состоянии элемент будет находиться до начала анимации и после её завершения:

  • `animation-fill-mode: forwards;` — после завершения анимации элемент будет находиться в состоянии последнего кейфрейма;
  • `animation-fill-mode: backwards;` — после завершения анимации элемент будет находиться в состоянии первого кейфрейма;
  • `animation-fill-mode: both;` — перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения — в состоянии последнего.

В примере ниже к трём элементами применяется одна и та же анимация, различается лишь значение `animation-fill-mode`:

Запуск и остановка анимации

За это отвечает свойство `animation-play-state`, которое может принимать два значения: `running` или `paused`. Тут всё просто ��

Направление анимации

Используя свойство `animation-direction`, мы можем управлять направлением воспроизведения анимации. Вот возможные значения:

  • `animation-direction: normal;` — анимация воспроизводится в прямом порядке, как обычно;
  • `animation-direction: reverse;` — анимация воспроизводится в обратном порядке, от `to` к`from`;
  • `animation-direction: alternate;` — чётные повторы анимации воспроизводятся в обратном порядке, нечётные — в прямом;
  • `animation-direction: alternate-reverse;` — нечётные повторы анимации воспроизводятся в обратном порядке, чётные — в прямом.

Функция плавности вывода анимируемых кадров

Свойство `animation-timing-function` позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Стоит учесть, что по умолчанию анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас существуют следующие предопределённые значения: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end.`

Однако вы можете создавать такие функции самостоятельно. Значение `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` принимает на вход 4 аргумента и строит кривую распределения процесса анимации. Попрактиковаться в создании этих функций можно cubic-bezier.com и matthewlein.com.

И, наконец, анимацию можно разбить на набор дискретных значений при помощи функции `steps (amount of steps, direction)`, которая принимает на вход количество шагов и направление (`start` или `end`). В следующем примере анимация состоит из 7 шагов, последний из которых произойдёт прямо перед завершением анимации:

Совместимость с браузерами

CSS-анимация хорошо поддерживается браузерами. С актуальной информацией можно ознакомиться, взглянув на эту таблицу:

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Материалы для дальнейшего изучения

  • animate.css — самая популярная библиотека для работы с анимациями;
  • effeckt.css — ещё одна известная библиотека;
  • интерактивная шпаргалка;
  • подробнейшая документация от Mozilla;
  • bounce.js — библиотека для создания классных эффектов.

Также в изучении анимации вам поможет этот англоязычный курс:

Вот и всё! Возможно, какие-то моменты мы не разобрали, но при помощи материалов, указанных выше, вы сможете сделать это самостоятельно. Успехов в дальнейшем изучении веб-разработки!

Frontender Magazine

Я постарался написать настолько понятное и простое руководство по CSS3-анимациям, насколько это вообще возможно. Итак, приступим!

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию.
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Анимация представляет собой набор ключевых кадров, который содержится в css и выглядит вот так:

Давайте разберёмся что мы здесь видим. Ключевое слово @keyframes указывает на саму анимацию. Далее идет её имя, я назвал её test-animation . В фигурных скобках находится список ключевых кадров. В данном случае это начальный кадр 0% и конечный кадр 100% . Также начальный и конечный кадры можно записать ключевыми словами from и to .

Теперь посмотрите на следующий код. Так тоже можно написать:

Обратите внимание, если не задан начальный ( from , 0% ) или конечный ( to , 100% ) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

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

Подключение анимации к элементу происходит двумя командами:

В правиле animation-name задаётся имя созданной вами анимации @keyframes . Правило animation-duration указывает сколько секунд анимация будет воспроизводиться. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms) .

Ключевые кадры можно группировать:


Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:

Задержка анимации

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах:

Количество проигрываний анимации

В качестве значения свойства animation-iteration-count выставляем любое положительное значение от 0, 1, 2, 3… и т.д. либо infinite для бесконечного повторения.

Состояние ДО и ПОСЛЕ анимации

Свойство animation-fill-mode определяет в каком состоянии будет элемент до начала анимации и после её завершения.

  • animation-fill-mode: forwards; — после завершения анимации состояние элемента будет соответствовать последнему кадру.
  • animation-fill-mode: backwards; — после завершения анимации состояние элемента будет соответствовать первому кадру.
  • animation-fill-mode: both; — до начала анимации состояние элемента будет соответствовать первому кадру, а после окончания — последнему.

В примере ниже трём элементам назначена одна и та же анимация, но каждый элемент имеет разные значения animation-fill-mode :

Запуск и остановка анимации

Осуществляем с помощью свойства animation-play-state , который принимает только 2 значения: либо running , либо paused . Тут всё просто :)

Направление анимации

С помощью свойства animation-direction мы можем управлять направлением воспроизведения анимации. Его параметры могут принимать несколько значений:

  • animation-direction: normal; — анимация проигрывается вперёд, это обычное направление анимации.
  • animation-direction: reverse; — анимация проигрывается в обратном направлении, от to к from .
  • animation-direction: alternate; — чётные проигрывания анимации будут идти в обратном направлении, а нечётные — в обычном.
  • animation-direction: alternate-reverse; — чётные проигрывания вашей анимации будут проигрываться в обычном направлении, а нечётные — в обратном.

Функция распределения анимируемых значений по времени

Правило animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end.

Однако такие функции можно создавать самому. Специальная функция animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на http://cubic-bezier.com/ или https://matthewlein.com/ceaser/.

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps(количество шагов, направление) , в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end . В следующем примере анимация будет состоять из 7 шагов, последний из которых будет сделан непосредственно перед завершением анимации:

Посмотреть на CodePen: Форма анимации.

Поддержка браузерами

CSS-анимации имеют довольно хорошую поддержку, и со временем она будет становится все лучше. Подробно о поддержке анимаций десктопными и мобильными браузерами можно узнать из таблицы Can I use.

Материалы для дальнейшего изучения

  • Animate.css — самая знаменитая библиотека CSS-анимаций.
  • Effect.css — не менее известная библиотека анимаций.
  • CSS3 Animation Cheat Sheet — отличная подборка примеров.
  • Курс CSS3 анимаций на htmlacademy — лучшее место, чтобы освоить анимации на практике. Платно, но очень дешево.
  • MDN CSS Animation — самый актуальный справочник по анимациям.
  • Обязательно поиграйте с Bounce.js. Крутейшие и супер-плавные эффекты.
  • Motion-ui-design — крутая коллекция ссылок по анимациям от @fliptheweb.

На этом всё! Есть несколько мелочей, которые мы не рассмотрели, подробнее о них можно прочесть в приведённых выше материалах. Однако вы должны знать, что и без них вы только что изучили CSS3-анимации примерно на 97,8%. Поздравляю :)

Цукерберг рекомендует:  Разработка веб-интерфейсов по БЭМ-методологии

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Создание анимации с Animate.css

2 ноября 2013 | Опубликовано в css | 1 Комментарий »

Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков, приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) — создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут ознакомиться с ней и использовать в своих проектах.

«При реализации нескольких своих проектов я работал с анимацией CSS3 по ключевым кадрам и заметил, что повторяю код. Чтобы не делать это в будущем я начал создавать анимационную библиотеку. После завершения я был доволен собой и выпустил код на GitHub, где его и можно взять».

Как же на практике применять библиотеку Animate.css? В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

  • Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит для первого этапа ознакомления с анимацией в целом, поскольку позволяет разобраться в том, как это всё устроено.
  • Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
  • Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

Далее подключаем файл animate.css через тег
как это делается с любым другим стилевым файлом.

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта. Например, вы хотите добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:

Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.

3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).

Пример 1. Всплывающее сообщение

Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу добавляем класс animated и подключаем jQuery (пример 2).

Пример 2. Галерея

В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.

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

Анимация элементов в CSS. Часть 2.

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

Рис. 196а Пример покадровой анимации.

Обращаю Ваше внимание на то, что для изучения этого материала Вам понадобятся знания, которые необходимо получить в предыдущей статье «Анимация в CSS. Часть 1».

Состояние анимации

Следующее простое свойство, которое мы рассмотрим animation-play-state , оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:

  • running — анимация воспроизводится (значение по умолчанию).
  • paused — анимация приостановлена.

Перейдем к рассмотрению примера:

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.

При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state , анимация возобновляется, когда курсор покидает элемент.

Результат нашего примера:

Рис. 197 Пример приостановки и запуска анимации.

Направление анимации

CSS свойство animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

Ниже представлены возможные значения для настройки направления анимации:

Значение Описание
normal Каждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
reverse Анимация воспроизводиться в обратном направлении.
alternate Анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5. ) и как reverse каждый четный раз (2, 4, 6. ).
alternate-reverse Анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5. ) и как normal каждый четный раз (2, 4, 6. ).

Перейдем к рассмотрению примера:

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента.

С использованием селектора класса и свойства animation-direction мы указали различные значения, которые определяют возможные направления для анимации.

Результат нашего примера:

Рис. 198 Направление анимации в CSS.

Стиль для элемента, когда анимация не воспроизводится

CSS свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку, установленную свойством animation-delay ).

Ниже представлены возможные значения для настройки этого свойства:

Значение Описание
none К элементу не применяются какие-либо стили до (во время задержки анимации), или после воспроизведения анимации. Значение по умолчанию.
forwards По окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-direction и animation-iteration-count :
animation-direction
(значение по умолчанию normal)
animation-iteration-count
(значение по умолчанию 1)
Значение последнего
ключевого кадра
normal четное или нечетное число 100% или to
reverse четное или нечетное число 0% или from
alternate четное число 0% или from
alternate нечетное число 100% или to
alternate-reverse четное число 100% или to
alternate-reverse нечетное число 0% или from
backwards К элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода заданного свойством animation-delay . Первый ключевой кадр определяется на основании значения animation-direction :
animation-direction
(значение по умолчанию normal)
Значение первого
ключевого кадра
normal 0% или from
alternate 0% или from
reverse 100% или to
alternate-reverse 100% или to
both К элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки).

Перейдем к рассмотрению примера:

В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration ), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay ).

С использованием селектора класса и свойства animation-fill-mode мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):

  • Первый элемент — к элементу не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации. Это значение по умолчанию.
  • Второй элемент — по окончанию анимации к элементу применяется стиль последнего ключевого кадра (красный фон).
  • Третий элемент — к элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр).
  • Четвертый элемент — к элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки). Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр), а по окончанию получит красный фон

Результат нашего примера:

Рис. 199 Пример использования свойства animation-fill-mode.

Универсальное свойство animation

Мы с Вами рассмотрели все возможные свойства анимации, введенные в CSS 3, это нам было необходимо для того, чтобы мы могли грамотно использовать универсальное свойство animation , которое позволяет задать все эти свойства анимации в одном объявлении, ведь набирать их по отдельности, как правило, затруднительно.

Давайте перед тем как перейдем к примерам, повторим свойства, которые мы рассмотрели:

  • Имя анимации — animation-name ( «keyframename /-s | none» )
  • Продолжительность анимации — animation-duration ( «time» )
  • Скорость анимации — animation-timing-function ( «linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n)» )
  • Задержка анимации — animation-delay ( «time | initial» )
  • Количество циклов анимации — animation-iteration-count ( «number | infinite» )
  • Направление анимации — animation-direction ( «normal | reverse | alternate | alternate-reverse» )
  • Стиль, когда анимация имеет задержку, или завершена — animation-fill-mode ( «none | forwards | backwards | both» )
  • Состояние анимации — animation-play-state ( «paused | running» )

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

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration ), иначе, анимация не будет проиграна, так как значение по умолчанию у этого свойства равно нулю.

Перейдем к примеру:

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции, изменяя при этом цвет заднего фона и форму границ элемента (свойство border-radius ).

С использованием универсального свойства animation мы указали следующие параметры анимации:

  • Имя анимации — iliketomoveit .
  • Длительность анимации — 4 секунды .
  • Кривая скорости — шаговая анимация steps(3,start) . На каждую часть ключевого кадра будет произведено 3 шага.
  • Задержка анимации — 500 миллисекунд .
  • Количество циклов — infinite (бесконечно).
  • Направление анимации — reverse (в обратном направлении).

Результат нашего примера:

Рис. 200 Пример использования универсального свойства animation.

Рассмотрим следующий пример в котором

В этом примере мы создали несколько анимаций, в которых с помощью свойства transform происходит сдвиг вложенных элементов

  • Имя анимации — up .
  • Длительность анимации — 1 секунда .
  • Кривая скорости — linear (одинаковая скорость на протяжении всей анимации).
  • Задержка анимации — от 1 секунды до 1,8 секунды .
  • Количество циклов — infinite (бесконечно).

Результат нашего примера:

Рис. 201 Пример анимации загрузки.

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

Использование библиотеки Animate.css

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

Посмотреть все возможные анимации вы можете на сайте проекта, там же доступна к скачиванию минимизированная версия стилей (стили без пробелов и переносов строк). Кроме того, в репозитории GitHub автора проекта вы сможете скачать для изучения, или использования не сжатую версию CSS стилей библиотеки Animate.css. Давайте перейдем в репозиторий и скачаем его содержимое (кнопка «Clone or Download»). На этапе изучения Вам понадобится из скачанного архива только файл animate.css (не сжатая версия).

Чтобы использовать эту библиотеку, достаточно скопировать этот файл стилей в папку с Вашим документом и подключить с использованием тега :

Давайте рассмотрим простую анимацию из библиотеки, которая измененяет прозрачность элемента:

Эти ключевые кадры с помощью свойства opacity позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих