CSS3 Переход

CSS3 Переходы

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

Наведите курсор на следующие элементы:

CSS3
Переход

Поддержка браузеров

Числа в таблице указывают номер первой версии браузера, поддерживающей это свойство.

Число, стоящее непосредственно перед -webkit-, -ms- или -moz-, — это номер первой версии браузера, поддерживающей свойство с префиксом.

Свойство
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

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

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

Чтобы добиться этого, необходимо указать две вещи:

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

Пример

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

div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ }

Примечание:Если длительность не указана, переход не будет иметь эффекта, потому что значение по умолчанию — 0.

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

OperaSafariChromeFirefoxInternet Explorer

Пример

Укажите, когда указатель мыши наводится (:hover) на элемент <div>:

div:hover { width:300px; }

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

Примечание:Когда курсор мыши перемещается над элементом, он постепенно переходит от исходного стиля.

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

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

OperaSafariChromeFirefoxInternet Explorer

Пример

Добавлены эффекты width, height и transform:

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

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

Свойство transition

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

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

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

OperaSafariChromeFirefoxInternet Explorer

Пример

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

div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }

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

OperaSafariChromeFirefoxInternet Explorer

Пример

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

div { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }

Попробуйте сами »
Другие расширения