Закрыть   X

  •    
  •    
Печать

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


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки