Просмотр кода страницы Анимация с помощью css

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


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

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

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

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

Фреймворк поставляется в виде одного css файла, который подключается как обычно:
1
	
 <link rel="stylesheet" href="animate.css">

После подключения осталось только назначить необходимые классы элементам:
1
	
 <div class="animatebox animation flash"></div>

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

Больше ничего не нужно писать — все замечательно заводится и работает.
Пример работы: [http://gering111.com/demo_pages/demo_animate/]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 файлов, для каждого типа анимации. Выбираете, что вам нужно и подключаете. Мелочь, а приятно.

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

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

'''Ссылки по теме:'''
*[http://gering111.com/css-animate/]http://gering111.com/css-animate/

*[http://beloweb.ru/novichkam/plavnaya-animatsiya-obektov-tolko-s-pomoshhyu-css.html]http://beloweb.ru/novichkam/plavnaya-animatsiya-obektov-tolko-s-pomoshhyu-css.html

*[http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/]http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

*[http://www.vanseodesign.com/css/animation/]http://www.vanseodesign.com/css/animation/

*[http://www.w3.org/TR/css3-animations/#keyframes-]http://www.w3.org/TR/css3-animations/#keyframes-

*[http://gering111.com/freymvork-bonbon/]http://gering111.com/freymvork-bonbon/

Примеры дизайна сайтов: 
* [http://mainview.ru/vdoxnovenie/primery-dizajna-korporativnyx-sajtov]http://mainview.ru/vdoxnovenie/primery-dizajna-korporativnyx-sajtov