CSS3 анимация

Верстка

Рисунок CSS3 анимация
x;z-index:1 }
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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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

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

Мини-форум

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

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

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



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