| Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Android |
iOS |
| 10.0+ |
1.0+ |
26.0+ |
11.6+ |
12.10+ |
3.0+ |
4.0+ |
16.0+ |
2.1 |
2.0+ |
Краткая информация
Версии CSS
| CSS 1 |
CSS 2 |
CSS 2.1 |
CSS 3 |
|
|
|
|
Описание
Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
Синтаксис
transition-property: none | all | <свойство> [,<свойство>]*
Значения
- none
- Никакое свойство не задано.
- all
- Все свойства будут отслеживаться.
- <свойство>
- Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-duration</title>
<style>
body { margin: 0; }
.menu {
position: absolute;
height: 100px; width: 100%;
background: #fc0;
border-bottom: 20px solid #333;
top: -100px;
/* Анимация */
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
transition-property: top;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.menu:hover { top: 0; }
</style>
</head>
<body>
<div class="menu">
А здесь у нас будет своё
меню с преферансом и профурсетками.
</div>
</body>
</html>
В данном примере при наведении курсора на блок он плавно изменяет своё положение.
Объектная модель
[window.]document.getElementById("elementID").style.transitionProperty
Браузеры
Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-property.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-property.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-property.
Перейти обратно к новости
|