Свойство перехода CSS
Пример
Наведите указатель мыши на элемент <div>, чтобы постепенно изменить ширину со 100 до 300 пикселей:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство transition
является сокращенным свойством для:
Примечание. Всегда указывайте свойство transition-duration , иначе продолжительность равна 0 с, и переход не будет иметь никакого эффекта.
Значение по умолчанию: | все 0s облегчить 0s |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.transition="все 2" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Синтаксис CSS
transition: property duration timing-function delay|initial|inherit;
Значения свойств
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Когда <input type="text"> получит фокус, постепенно измените ширину со 100 до 250 пикселей:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Связанные страницы
Учебное пособие по CSS: CSS-переходы
Справочник по HTML DOM: свойство перехода