СSS Свойство transition
Пример
Наведите указатель мыши на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Редактор кода »
Определение и использование
Свойство transition - это сокращенное свойство для:
Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0s, и переход не будет иметь никакого эффекта.
| Значение по умолчанию: | all 0s ease 0s |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.transition="all 2s" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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;
Значение свойств
| Значение | Описание |
|---|---|
| transition-property | Задает имя свойства CSS, для которого предназначен эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
| transition-timing-function | Задает кривую скорости эффекта перехода |
| transition-delay | Определяет, когда начнется эффект перехода |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Когда <input type="text"> получает фокус, постепенно изменится ширина от 100px до 250px:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Переходы
HTML DOM Справочник: Свойство transition
