CSS Переход
CSS Переход позволяет плавно изменять значения свойств (от одного значения к другому) в течение заданного времени.
Пример: Наведите курсор на элемент ниже, чтобы увидеть эффект перехода CSS:
В этой главе вы узнаете о следующих свойствах:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Поддержка браузера для перехода
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Как использовать CSS3 Переходы?
Чтобы создать эффект перехода, необходимо указать две вещи:
- в свойство CSS3 добавить эффект
- длительность эффекта
Примечание: Если длительность не указана, переход не будет иметь эффекта, так как значение по умолчанию равно 0.
В следующем примере показан элемент 100px * 100px red <div>. Для элемента <div>, также задан эффект перехода для свойства width с длительностью 2 секунды:
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Эффект перехода начнется, когда указанное CSS свойство width изменит значение.
Теперь давайте зададим новое значение для свойства width,
когда пользователь наведет курсор мыши на элемент <div>:
div:hover {
width: 300px;
}
Попробуйте сами »
Обратите внимание: когда курсор выходит за пределы элемента, он постепенно возвращается к своему исходному стилю.
Изменить несколько значений свойств
В следующем примере добавляется эффект перехода для свойства width и height с длительностью 2 секунд для ширины и 4 секунд для высоты:
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
Попробуйте сами »
Указать кривую скорость перехода
Свойство transition-timing-function определяет кривую скорости эффекта перехода.
Свойство transition-timing-function может иметь следующие значения:
ease- задает эффект перехода с медленным запуском, затем быстрее, затем медленным завершением (по умолчанию)linear- определяет эффект перехода с одинаковой скоростью от начала до концаease-in- задает эффект перехода с медленным запускомease-out- определяет эффект перехода с медленным концомease-in-out- задает эффект перехода с медленным началом и концомcubic-bezier(n,n,n,n)- позволяет определить собственные значения в функцииcubic-bezier
В следующем примере показаны некоторые из различных линии скорости, которые можно использовать:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Попробуйте сами »
Задержка эффекта перехода
Свойство transition-delay определяет задержку (в секундах) для эффекта перехода.
В следующем примере задержка перед запуском составляет 1 секунду:
div {
transition-delay: 1s;
}
Попробуйте сами »
Переход + трансформация
В следующем примере также добавляется преобразование к эффекту перехода:
div {
transition: width 2s, height 2s, transform 2s;
}
Попробуйте сами »
Еще примеры перехода
Свойства перехода CSS3 можно задать по одному, например:
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Попробуйте сами »
или с помощью сокращенного свойства transition:
div
{
transition: width 2s linear 1s;
}
Попробуйте сами »
CSS3 Упражнения
Свойства CSS3 перехода
В следующей таблице перечислены все свойства transition CSS:
| Свойство | Описание |
|---|---|
| transition | Сокращенное свойство для установки четырех свойств перехода в одно свойство |
| transition-delay | Задает задержку (в секундах) для эффекта перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
| transition-property | Задает имя свойства CSS эффект перехода для |
| transition-timing-function | Определяет линию скорости эффекта перехода |