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;
}
