CSS3 Переходы

« Назад

CSS3 Переходы

С CSS3 мы можем добавлять эффекты при изменении одного стиля на другой без использования Flash анимаций и скриптов JavaScript.

Переместите мышь над элементом ниже:

CSS3
Переход

Поддержка Браузерами

Свойство	Поддержка Браузерами
transition

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

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

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

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

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

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

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

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

Пример

Эффект перехода для свойства width, продолжительность: 2 секунды:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari и Chrome */
-o-transition: width 2s; /* Opera */
}

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

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

Пример

Указать :hover для элементов <div>:

div:hover
{
width:300px;
}

Попробуйте сами »

Замечание: Когда курсор мыши уходит за пределы области элемента, он плавно изменяется обратно к своему исходному стилю.

Несколько Изменений

Чтобы добавить эффект более чем к одному стилю, укажите несколько свойств, разделяя их запятыми:

Пример

Добавление эффектов изменения ширины, высоты и трансформации:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Попробуйте сами »

Свойства Перехода

Следующая таблица перечисляет все свойства transition:

Свойство	Описание	CSS
transition	Стенографическое (сокращенное) свойство для установки четырех свойств перехода в одном свойстве	3
transition-property	Указывает название CSS свойства, к которому следует применить переход	3
transition-duration	Определяет, сколько времени займет переход. Значение по умолчанию 0	3
transition-timing-function	Описывает, как будет изменяться скорость выполнения перехода. Значение по умолчанию "ease"	3
transition-delay	Определяет, когда начнется переход. По умолчанию равно 0	3

Два примера ниже устанавливает все свойства перехода:

Пример

Использование всех свойств перехода в одном примере:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari и Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Попробуйте сами »

Пример

Те же самые эффекты перехода, указанные с использованием сокращенного свойства:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari и Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

Попробуйте сами »

« Назад

CSS3 Уроки

CSS3 Справочники

CSS3 Переходы