Эффекты и анимация на CSS

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

Animate.css — анимация через CSS

Animate.css — набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних страниц, разного рода слайдеров, так и для серьезных коммерческих проектов.

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

Узнать о том как использовать набор можете на Github вот здесь. Это, в принципе, не так сложно — вы просто подключаете файл стилей animate.css в head. А затем добавляете класс «animated» с названием эффекта. Можете использовать стили совместно с jQuery и объединять с разными другими эффектами.

Effeckt.css — разные CSS эффекты

Effeckt.css — подборка разных CSS эффектов для веб-приложений, которая постоянно пополняется новыми фишками. Отбираются для нее только правильно работающие, удобные и полезные «приемчики».

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

А вот ссылка на github где найдете описание библиотеки с инструкциями по применению. В целом оба набора (Animate.css и Effeckt.css) весьма хороши. Веб-разработчикам должны пригодиться!