Анимация с помощью css

Сайтостроение » CSS анимация без проблем

CSS анимация — относительно новая технология, которая будет активно развиваться ввиду своей простоты и удобства. Не все браузеры пока поддерживают анимацию, однако уже есть инструменты, помогающие разработчикам в создании «живых» объектов на своих страницах.

Я не буду углубляться, что такое css анимация — не об этом статья, да и информации в сети очень много. Вплотную работать с анимацией не приходилось, поэтому что попало рассказывать тоже не хочется. Не так давно я уже рассматривал небольшой css фреймворк для добавления 3D кнопок — вот статья на эту тему.

Сегодня же речь пойдет о небольшом фреймворке для работы с css анимацией — animate.css. Чем он хорош?

   он кроссбраузерный (относительно, конечно) и некоторые проблемы совместимости решаются с помощью скрипта Modernizr
   он бесплатный
   он поддерживает 56(!) различных эффектов анимации
   он очень легко встраивается в страницу

Фреймворк поставляется в виде одного css файла, который подключается как обычно: 1

<link rel="stylesheet" href="animate.css">

После подключения осталось только назначить необходимые классы элементам: 1

Из этих трех классов фреймворком обрабатываются два - animation и flash. Первый указывает, что блок должен быть анимированным, второй — какой тип анимации нужно применить.

Больше ничего не нужно писать — все замечательно заводится и работает. Пример работы: [1]http://gering111.com/demo_pages/demo_animate/

Остался еще один момент. Вам не нужно редактировать сам процесс анимации, однако — ее длительность нужно менять. Разработчик предусмотрел это, поэтому длительность можно указать непосредственно в описании стилей того элемента, которому назначена анимация. Примерно так:

.animatebox{
width:35%;
 height:200px;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 3s;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-duration: 3s;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-ms-animation-duration: 3s;
-ms-animation-delay: 2s;
-ms-animation-iteration-count: infinite;

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

Скачать этот фреймворк можно с официального сайта [2]http://daneden.me/animate/, там же есть просмотр всех доступных эффектов.

На этом все — удачного вам дня ;) CSS, CSS3, web-dev

Ссылки по теме: