Internet Explorer пока не поддерживает свойство transition.

Firefox 4 требует приставки -moz-.

Chrome и Safari требуют приставки -webkit-.

Opera требует приставки -o-.

Как это работает?

CSS3 переходы - это эффекты, которые позволяют элементу плавно изменять один стиль на другой.

Чтобы сделать это, вы должны указать две вещи:

• Указать свойство CSS, к которому вы хотите добавить эффект
• Определить продолжительность эффекта.

Замечание: Если свойство duration не указано, плавный переход не произойдет, потому что значение по умолчанию равно 0.

Эффект начнется, когда указанное свойство CSS начнет изменяться. Обычно эффект перехода (плавного изменения CSS свойства) привязывают к моменту, когда пользователь перемещает мышь над элементом:

Последнее обновление: 01.05.2016

Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.

Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:

Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.

Чтобы указать свойство как анимируемое, его название передается свойству transition-property

Transition-property: background-color;

Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties

Transition-duration: 2s;

Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:

Transition-duration: 500ms;

И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие, которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для псевдокласса:hover . То есть при наведении указателя мыши на элемент div, будет срабатывать переход.

Кроме псевдокласса:hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии) или:focus (получение элементом фокуса).

Также для запуска перехода можно использовать код JavaScript.

Анимация набора свойств

При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:

Div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; transition-property: background-color, width, height, border-color; transition-duration: 2s; } div:hover{ background-color: red; width: 120px; height: 120px; border-color: blue; }

Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства задать свое время:

Transition-property: background-color, width, height, border-color; transition-duration: 2s, 3s, 1s, 2s;

Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.

Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all :

Transition-property: all; transition-duration: 2s;

Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса:hover .

Функции анимации

Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.

В качестве значения это свойство может принимать одну из функций:

linear : линейная функция плавности, изменение свойства происходит равномерно по времени

ease : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

ease-in : функция плавности, при которой происходит только ускорение в начале

ease-out : функция плавности, при которой происходит только ускорение в конце анимации

ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

cubic-bezier : для анимации применяется кубическая функция Безье

Применим функцию ease-in-out:

Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:

Transition-timing-function: cubic-bezier(.5, .6, .24, .18);

Задержка перехода

Свойство transition-delay позволяет определить задержку перед выполнением перехода:

Transition-delay: 500ms;

Временной период также указывается в секундах (s) или миллисекундах (ms).

Свойство transition

Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:

Transition-property: background-color; transition-duration: 3s; transition-timing-function: ease-in-out; transition-delay: 500ms;

Будет аналогично следующей записи:

Transition: background-color 3s ease-in-out 500ms;

Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов:hover и:focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса:hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.

Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа "все или ничего". Например, настройки стиля псевдокласса:hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.

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

Простой цветовой переход

Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:

Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный переход при отодвигании курсора. В результате получаем более изящную кнопку.

Смену цвета без эффекта перехода можно реализовать следующим кодом:

SlickButton { color: white; font-weight: bold; padding: 10px; margin: 20px; border: solid 2px gray; background: lightgreen; cursor: pointer; } .slickButton:hover { color: black; background: yellow; }

А этот код создает кнопку, которая форматируется только что описанным стилем:

Простая кнопка!

Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition . (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс:hover.)

Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:

SlickButton { /* ... */ -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; }

Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.

Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления - цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.

Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:

SlickButton { /* ... */ -webkit-transition: background 0.5s, color 0.5s; -moz-transition: background 0.5s, color 0.5s; -o-transition: background 0.5s, color 0.5s; }

Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all :

SlickButton { /* ... */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }

На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов - не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.

Задержка и комбинирование эффектов перехода

В эффектах перехода можно использовать свойство transition-delay , которое задерживает начало перехода на указанное время:

SlickButton { /* ... */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; transition-delay: 2s; }

Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:

SlickButton { /* ... */ -webkit-transition: all 0.5s 2s; -moz-transition: all 0.5s 2s; -o-transition: all 0.5s 2s; transition: all 0.5s 2s; }

Этот код аналогичен предыдущему. Спецификация CSS3 позволяет комбинировать несколько эффектов перехода (с разной длительностью), как это было продемонстрировано с кнопкой. Вместо указания всех подробностей перехода в одном свойстве transition, можно использовать свойства transition-property (для указания анимируемого свойства) и transition-duration (для указания задержки):

SlickButton { /* ... */ /* Устанавливаем видоизменяемые свойства */ -webkit-transition-property: opacity, scale, background, color; -moz-transition-property: opacity, scale, background, color; -o-transition-property: opacity, scale, background, color; transition-property: opacity, scale, background, color; /* Устанавливаем время анимации */ -webkit-transition-duration: 2s, 1.6s, 1s, 1s; -moz-transition-duration: 2s, 1.6s, 1s, 1s; -o-transition-duration: 2s, 1.6s, 1s, 1s; transition-duration: 2s, 1.6s, 1s, 1s; } .slickButton:hover { color: black; background: yellow; opacity: .4; -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2); }

Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.

Использование функций замедления

Переход можно настроить более тонко. Для этого можно использовать свойство transition-timing-function , которое позволяет изменять скорость перехода в процессе его осуществления. Например, начало перехода может быть медленным с последующим ускорением, или наоборот, быстрый переход в начале и замедленный в конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и более сложных анимациях оно может изменить общее восприятие эффекта.

Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).

Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:

Transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

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

Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).

Понимание логики построения кривых Безье позволяет создавать практически бесконечное разнообразие пользовательских функций смягчения для анимаций CSS3. Есть даже возможность задавать отрицательные значения или значения, превышающие 1, для создания чрезвычайно кривых смягчений, например:

Transition: all 2000ms cubic-bezier(0.280, -0.315, 0.685, 1.390);

Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.

В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier.

Переходом называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.

Рассмотрим для начала простой пример. У нас имеется несколько картинок, каждая из них должна поворачиваться на небольшой угол при наведении на неё курсора (пример 1).

Пример 1. Применение transition

Как только мы наводим курсор на любую картинку, она плавно поворачивается на 15 градусов влево (рис. 1).

Рис. 1. Плавный поворот изображения

В стилях для :hover мы устанавливаем желаемые изменения элементов при наведении курсора. Сам переход добавляется в стилях элемента через свойство transition . У него четыре параметра - одно или несколько свойств, продолжительность анимации, функция времени и задержка времени перед анимацией.

Свойства

По умолчанию анимируются все свойства указанные внутри :hover . Иногда часть свойств должна анимироваться, а часть нет. В этом случае все желаемые свойства следует перечислить через запятую в transition .

Transition: transform, border 1s;

Продолжительность анимации

Это время, в течение которого будет длиться движение. Задаётся как в секундах (1s, 0.5s), так и в миллисекундах (100ms).

Задержка анимации

Движение не обязательно должно начинаться немедленно, допустимо добавить в начале небольшую задержку, после завершения заданного времени сразу же начнётся анимация.

Функция времени

Анимация может происходить по разному. Например, медленно начинаться в начале движения и ускоряться в конце или наоборот. Вариантов множество и они создают всевозможные интересные эффекты. Скорость анимации управляется специальной функцией связывающей время и движение. Вот как она выглядит на графике (рис. 2).

Рис. 2. Вид функции времени

Начальная точка имеет координаты 0.0, 0.0, конечная - 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону. В итоге это будет выглядеть, словно элемент сперва движется в обратную сторону, а потом уже в нужную. Так можно создать эффект отскакивания или инерции. Вот наиболее популярные значения функции времени.

• ease - анимация начинается медленно, затем ускоряется и к концу движения опять замедляется.
• ease-in - анимация медленно начинается, к концу ускоряется.
• ease-out - анимация начинается быстро, к концу замедляется.
• ease-in-out - анимация начинается и заканчивается медленно.
• linear - одинаковая скорость от начала и до конца.

В примере 2 переход применяется для плавного выдвижения панели из-за левого края экрана при наведении на неё курсора мыши.

Пример 2. Использование функции времени

Если у вас возникли вопросы по этому коду, звоните мне по телефону: 555-3298.

В данном примере много стилевых свойств, но они предназначены лишь для создания нужного дизайна. Анимация при наведении курсора мыши делается двумя свойствами - transition задаёт параметры анимации, а left - это свойство, значение которого плавно изменяется со временем (в данном случае в течение одной секунды). Исходно left равно -320px и большая часть панели скрыто за левым краем браузера, виден лишь кусочек. Затем left становится равным нулю и таким образом вся панель становится видна.

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

Дата добавления: 2011-10-16

Свойство 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.

Браузеры

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

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

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

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

Теперь воспользуемся свойством 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 Задержка анимации. Время в секундах.