Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Переходы


« Назад Далее »

CSS3 Переходы

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


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

CSS3
Переход

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

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

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

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

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

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


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

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

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

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

Пример

Эффект перехода для свойства 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 свойства) привязывают к моменту, когда пользователь перемещает мышь над элементом:

Opera Safari Chrome Firefox Internet Explorer

Пример

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

div:hover
{
width:300px;
}

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

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


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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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;
}

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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;
}

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





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru