Animate.css – библиотека готовой анимации

Добавление анимации, очень нудный и долгий процесс, даже для опытных программистов и верстальщиков. Сегодня я вам покажу хорошую и качественную библиотеку готовой CSS3 анимации. Это очень популярная библиотека, которой может пользоваться любой, даже самый не опытный верстальщик, так как для добавления анимации, вам нужно будет просто изменить класс объекта.

Давайте все по порядку…

Вот видео обзор данной библиотеки…

Ссылка на сайт данной библиотеки – https://daneden.github.io/animate.css/

В принципе, я все объяснил на видео, но думаю что не помешает все повторить!

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

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

Далее мы подключаем этот файл к нашему проекту. Напомню, что подключение файлов прописывается внутри тега head, с помощью тега link.

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

Это всё. Если вам говорят, что пользоваться готовыми фреймворками и библиотеками это не профессионально, то знайте, что это абсолютно не так. Тратить много время на прописывание “велосипедов” – вот что не профессионально! Но в любом случае посоветую вам разобраться в работе данной библиотеки, чтобы понимать как там все работает.

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/prog_time В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свой навык на практике на нашем канале

https://www.youtube.com/channel/UCF_m4pWmG7zor1hHBCf_PqA

Рекомендованные

 

Вам также будет интересно

 

comments powered by HyperComments