САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

<Предыдущая Следующая>

В 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).

<Предыдущая Следующая>

Последние добавления

HTML для новичков

XHTML

CSS для новичков