CSS3 анимация

Верстка

Рисунок CSS3 анимация
CSS3 анимация CSS3 анимация
оценка: 4.1 из 5
оценок: 9

А занете ли вы, что с появлением CSS3 для создания хорошей анимации на сайте необязательно использовать JavaScript или Flash? Конечно, такая анимация будет работать не для всех браузеров, а только для тех, которые уже поддерживают CSS3. По мне - так это даже хорошо. Нужно идти в ногу со временем. Но если вы захотите кроссбраузерности, то просто дописывайте для других браузеров анимацию в javascript.

Анимация в CSS3 делается посредством свойства transition и разницы стилей обычного селектора и селектора с псевдоклассом :hover. Проще говоря, если к элементу привязан псевдокласс :hover, то смена стиля произойдет моментально при наведении курсора мыши на элемент. Если к элементу привязано CSS свойство transition, то переход стиля произойдет анимированно.

Свойство transition содержит следующие параметры:

Code
transition: [ property ] [ duration ] [ func ] [ delay ];
  • property - css-свойство, которое нужно анимировать. Если анимация должна затронуть все свойства, то используется параметр all. Если анимация не должна происходить, то используется параметр none. По умолчанию используется параметр all.
  • duration - время анимации. Задается в секундах (s), или миллисекундах (ms). Значение по умолчанию - 0
  • func - функция, которая определяет характер анимации. Определяется кривой Безье третьего порядка, где координаты начальной точки - P0(0.0, 0.0), координаты конечной точки P3(1.0, 1.0), координаты промежуточных точек - P1(x1, y1), P2(x2, y2). Координаты имеют значение от 0 до 1. Может принимать следующие значения:
    • ease - P1(0.25, 0.1), P2(0.25, 1.0).
    • linear - P1(0.0, 0.0), P2(1.0, 1.0).
    • ease-in - P1(0.42, 0.0), P2(1.0, 1.0).
    • ease-out - P1(0.0, 0.0), P2(0.58, 1.0).
    • ease-in-out - P1(0.42, 0.0), P2(0.58, 1.0).
    • cubic-bezier(x1, y1, x2, y2) - P1(x1, y1), P2(x2, y2).
    Значение по умолчанию - ease.
  • delay - задержка перед запуском анимации. Измеряется в секундах (s) или миллисекундах (ms). По умолчанию - 0.

К объекту можно прописать несколько анимаций. Для этого параметры свойства transition нужно прописывать через запятую.

Дополнительно имеются свойства, относящиеся к transition:

  • transition-property - отвечает за параметр property;
  • transition-duration - отвечает за параметр duration;
  • transition-timing-function - отвечает за параметр func;
  • transition-delay - отвечает за параметр delay.

И немного о кроссбраузерности. Свойство transition для разных браузеров прописывается по разному. При этом параметры свойства задаются для всех одинаково:

  • -o-transition - Opera 10.5+
  • -moz-transition - Firefox 4.0+
  • -webkit-transition - Safari 3.1+, Chrome 1.0+
  • -ms-transition - Internet Explorer 10

А теперь применим на практике усвоенные знания, и посмотрим на пример:

Пример работает в Opera 10.5+, Firefox 4.0+, Safari 3.1+, Chrome 1.0+, Internet Explorer 10. Просто наведите курсор на блок и через секунду он изменится.

В браузерах, поддерживающих CSS3 свойство trandition произойдет плавное изменение цвета блока и его рамки. В неподдерживающих браузерах переход из одного состояния в другое произойдет моментально без анимации. В IE версии ниже 10 вообще ничего не произойдет, так как в IE псевдокласс :hover применим только к ссылкам (в ссылках произойдет моментальное изменение).

Код данного примера:

Code
<style type="text/css">
  .testBlock {
    width: 300px;
    height: 100px;
    border: 3px solid #00FF00;
    background-color: #EEEEFF;
    padding: 20px;
    transition: all 500ms linear 500ms; // CSS3
    -o-transition: all 500ms linear 500ms; // Opera 10.5+
    -moz-transition: all 500ms linear 500ms; // Firefox 4.0+
    -webkit-transition: all 500ms linear 500ms; // Safari 3.1+, Chrome 1.0+
    -ms-transition: all 500ms linear 500ms; // IE10
  }
  .testBlock1:hover {
    background-color: #FFEEEE;
    border-color: #FF0000;
  }
</style>

<div class="testBlock">
  Содержимое блока
</div>

Итак, анимированный переход из одного состояния в другое делается достаточно просто. Но на момент написания статьи стандарт CSS3 еще только проектируется, и возможны некоторые изменения в свойствах и параметрах. Также не все браузеры поддерживают свойство CSS3 transition, а некоторые поддерживают частично. Поэтому используйте эту возможность обдуманно и дублируйте скриптами для неподдерживающих браузеров (CSS3 анимация ест меньше ресурсов).

И в подарок, некая реализация особой анимации. Попробуем анимировать трансформацию (поворот на 360°, увеличение в 1.5 раза и наклон на 20°):

Интересная анимация.

Код выглядит так:

Code
<style type="text/css">
  .testBlock {
    width: 150px;
    height: 50px;
    border: 3px solid #0000FF;
    background-color: #EEEEFF;
    padding: 20px;
    transition: all 1s;
    -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
  }
  .testBlock:hover {
    transform: rotate(360deg) scale(1.5) skew(20deg);
    -o-transform: rotate(360deg) scale(1.5) skew(20deg);
    -moz-transform: rotate(360deg) scale(1.5) skew(20deg);
    -webkit-transform: rotate(360deg) scale(1.5) skew(20deg);
    -ms-transform: rotate(360deg) scale(1.5) skew(20deg);
    border-color: #FF0000;
  }
</style>

<center>
  <div class="testBlock">
    Содержимое блока
  </div>
</center>

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




CSS3 анимация
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:6289
Рейтинг:4.1/9
Дата добавления:2011-12-12 09:06, Понедельник
Добавил:Szen
Теги:transition, CSS3, анимация

Мини-форум

№ 02011-12-12 09:06
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "CSS3 анимация".
Гость
Учавствовать в обсуждении "CSS3 анимация" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что бы вы хотели изучить?
Всего ответов: 255
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 6
Гостей: 6
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz