transition
CSS свойство transition
Поддержка браузеров
 |
 |
 |
 |
 |
 |
 |
|
|
|
Firefox 4 поддерживает альтернативное свойство -moz-transition.
Safari и Chrome поддерживают альтернативное свойство -webkit-transition.
Opera поддерживает альтернативное свойство -o-transition.
Описание
Свойство transition позволяет устанавливать значения таких свойств, как transition-property, transition-duration, transition-timing-function, и transition-delay в одном объявлении.
Всегда указывайте свойство transition-duration, иначе продолжительность приравнивается к 0 и эффекта не будет.
| Значение по умолчанию: | all 0 ease 0 |
|---|---|
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transition="width 2s" |
Значения свойства
| Значение | Описание |
|---|---|
| transition-property | Указывает название CSS свойства, для которого будет применен эффект трансформации. |
| transition-duration | Указывает, сколько секунд(s) или миллисекунд(ms) будет продолжаться эффект трансформации. |
| transition-timing-function | Задает кривую скорости для эффекта трансформации. |
| transition-delay | Указывает, когда должен начаться эффект трансформации. |
div.primer{
width:100px;
height:100px;
background:#9aca38;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div#p1:hover{
width: 620px;
}
