imported>Vix: Новая страница: «'''Сайтостроение » CSS анимация без проблем''' CSS анимация — относительно новая технология…»

2013-08-26T18:37:31Z

Новая страница: «'''Сайтостроение » CSS анимация без проблем''' 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

Анимация с помощью css - История изменений

imported>Vix: Новая страница: «'''Сайтостроение » CSS анимация без проблем''' CSS анимация — относительно новая технология…»