transition¶
Универсальное свойство transition
, которое позволяет одновременно задать значения transition-property
, transition-duration
, transition-timing-function
и transition-delay
.
Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover
или :active
, а также динамически через JavaScript.
Переходы и Анимации
Синтаксис¶
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
Значения¶
none
- Отменяет эффект перехода.
Примечание¶
- Chrome до версии 26, Safari до версии 6.1 и Android поддерживают свойство
-webkit-transition
. - Opera до версии 12.10 поддерживает свойство
-o-transition
. - Firefox до версии 16 поддерживает свойство
-moz-transition
.
Значение по-умолчанию: all 0s ease 0s
Применяется ко всем элементам, к псевдоэлементам ::before
и ::after
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transition</title>
<style>
#bar {
top: -5.5em;
right: 5em; /* Положение */
padding: 0.5em; /* Поля */
margin: 0; /* Отступы */
position: absolute; /* Абсолютное позиционирование */
width: 2em; /* Ширина */
background: #333; /* Цвет фона */
color: #fff; /* Цвет текста */
text-align: center; /* Выравнивание по центру */
/* Переход */
transition: top 1s ease-out 0.5s;
}
#bar:hover {
top: 0;
}
</style>
</head>
<body>
<ul id="bar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>↓</li>
</ul>
</body>
</html>