AJAX загрузка
home

В CSS3 Вы можете создавать эффекты динамического перехода.

CSS3 Переходы

Обратите внимание: данное свойство поддерживается в браузерах IE 10+, Chrome, Firefox и Opera. Для браузера Safari требуется добавить префикс -webkit.

С помощью нового CSS3 свойства transition Вы можете создавать эффекты перехода.

Для создания переходов необходимо указать какое CSS свойство будет изменятся и скорость выполнения этих изменений в секундах.

Пример

#wrap1
{
width:200px;
transition: width 4s;
}
#wrap1:hover
{
width:500px;
}


Быстрый просмотр

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

Пример

#wrap1
{
background-color:#E869AA;
color:#000;
width:200px;
transition: color 4s, width 4s, background-color 4s;
}
#wrap1:hover
{
color:#FFFFFF;
width:400px;
background-color:#880045;
}


Быстрый просмотр

Функции смягчения

Плавность выполнения переходов контролируется с помощью функций смягчения. В CSS3 существуют несколько видов таких функций:

  • linear
  • ease (функция смягчения по умолчанию)
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(x,x,x,x) (поведение функции контролируется переданными параметрами)

Пример

div {
width:230px;
transition:width 4s;
}
div:hover {
width:600px;
}
#el1 {
transition-timing-function:linear;
}
#el2 {
transition-timing-function:ease;
}
#el3 {
transition-timing-function:ease-in;
}
#el4 {
transition-timing-function:ease-out;
}
#el5 {
transition-timing-function:ease-in-out;
}
#el6 {
transition-timing-function:cubic-bezier(0.6,0.2,0.5,0.6);
}


CSS3 свойства переходов

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