Анимация с помощью 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/
Остался еще один момент. Вам не нужно редактировать сам процесс анимации, однако — ее длительность нужно менять. Разработчик предусмотрел это, поэтому длительность можно указать непосредственно в описании стилей того элемента, которому назначена анимация. Примерно так:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
.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
Ссылки по теме:
- [5]http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
Примеры дизайна сайтов: