transition

Свойство transition относится к новым свойствам CSS3. Познакомимся с ним поближе.

Все мы привыкли, что при наведении мышкой изменяется цвет ссылки. При этом цвет меняется резко, без плавного перехода. Свойство transition позволит добавить небольшую анимацию при изменении цвета без использования JavaScript.

В спецификации к данному свойству говорится следующее:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.

Иными словами, CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.

Браузеры

Сразу скажу о браузерах — новый стандарт еще не принят (на 2011 год), поэтому на данный момент необходимо использовать префиксы -webkit-, -moz- и -o-. Отсюда видно, что свойство поддерживают браузеры Chrome, Safari, Opera 10.5+, Firefox 4+. Наш «любимый» Internet Explorer как всегда не у дел, пользователь просто не увидит никакой анимации.

В этой статье я использовал префикс -webkit-, поэтому все приведенные здесь примеры будут работать только в Chrome и Safari.

Рассмотрим простой пример — добавим плавный переход фона ссылки

Для начала вспомним, как делается обычная смена цвета ссылки при наведении мышкой.


<style>
a.simple
{
    padding: 5px 10px;
    background: #69f;
    color: #000;
}
a.simple:hover
{
    background: #33f;
    color: #fff;
}
</style>

Проверим. Создадим две тестовые ссылки

Сайт для разработчиков

Сайт для пользователей

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый.

Теперь воспользуемся свойством CSS transition для плавной смены фона у ссылки. Создадим новый класс, который будет идентичен классу simple и добавим несколько новых строчек:


a.cool
{
    padding: 5px 10px;
    background: #69f;
    color: #000;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}
a.cool:hover
{
    background: #33f;
    color: #fff;
}

Создаем еще пару тестовых ссылок и посмотрим на результат:

Сайт для разработчиков

Сайт для пользователей

Теперь наш фон плавно меняет цвет в течение полусекунды! Из примера видно, что мы добавили три новые строчки со свойствами -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function.

На самом деле, их можно объединить в одно свойство:


-webkit-transition: background 0.5s ease;

Также можно добавить плавное изменение цвета текста:


a.cool2
{
    padding: 5px 10px;
    background: #69f;
    color: #000;
    -webkit-transition: background 0.5s ease, color 1.0s ease;
}
a.cool2:hover 
{
    background: #33f;
    color: #fff;
}

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 1 секунды. Проверяем:

Сайт для веб-мастеров

Если мы будем использовать одинаковые параметры для анимации, то можно использовать выражение:


-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся свойствам с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Можно также добавить задержку для эффекта при помощи transition-delay:


a.cool3
{
    padding: 5px 10px;
    background: #69f;
    color: #000;
    -webkit-transition: all 0.5s ease;
    -webkit-transition-delay: 0.5s;
}
a.cool3:hover
{
    background: #33f;
    color: #fff;
}

Теперь анимация будет работать через полсекунды после наведения мышки. Проверим на всякий случай:

Блог

Справочная таблица

Чтобы лучше усвоить материал, предлагаю вашему вниманию небольшую справочную таблицу.

transition-property
Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration
Длительность анимации. Время в секундах.
transition-timing-function
Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay
Задержка анимации. Время в секундах.

Дополнительные материалы

Рекомендую также посмотреть на пример Слайдер при помощи свойства CSS3 transition, где при помощи CSS и без всякого JavaScript удалось создать симпатичный слайдер.

Реклама