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