CSS transition Свойство

Наведите курсор на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:

div {
    width: 100px;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

Подробнее примеры ниже.

Определение и использование

Свойство transition является сокращенным свойством для четырех свойств перехода:

Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность — 0, а переход не будет иметь эффекта.

Значение по умолчанию:	all 0s ease 0s
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.transition="all 2s"

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -WebKit-, -МОЗ- или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Значение	Описание
transition-property	Задает имя свойства CSS, для которого используется эффект перехода
transition-duration	Указывает, сколько секунд или миллисекунд потребуется для выполнения эффекта перехода
transition-timing-function	Определяет кривую скорости эффекта перехода
transition-delay	Определяет, когда начнется эффект перехода
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Когда < входной тип = "Text" > получает фокус, постепенно измените ширину с 100px на 250пкс:

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out;
}

input[type=text]:focus {
    width: 250px;
}