CSS Переходы
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 |
Специальные браузерные префиксы
Некоторым старым браузерам нужны специальные префиксы (-webkit-), чтобы понять свойства перехода:
Пример
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari до 6.1 */
transition: width 2s;
}
Попробуйте сами »
Как использовать CSS-переходы?
Чтобы создать эффект перехода, необходимо указать две вещи:
- свойство CSS, к которому вы хотите добавить эффект
- продолжительность эффекта
Примечание: Если часть продолжительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию равно 0.
В следующем примере показан красный элемент <div> размером 100px * 100px. Элемент <div> также указал эффект перехода для свойства width с длительностью 2 секунды:
Пример
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Эффект перехода начнется, когда указанное свойство CSS (width) изменит значение.
Теперь давайте зададим новое значение для свойства width, когда пользователь наводит курсор на элемент <div>:
Обратите внимание, что когда курсор мыши выходит за пределы элемента, он постепенно вернется к своему первоначальному стилю.
Изменить несколько значений свойств
В следующем примере добавляется эффект перехода для свойства width и height с продолжительностью 2 секунды для ширины и 4 секунд для высоты:
Укажите кривую скорости перехода
Свойство transition-timing-function задает кривую скорости эффекта перехода.
Свойство transition-timer-function может иметь следующие значения:
ease- определяет эффект перехода с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)linear- определяет эффект перехода с одинаковой скоростью от начала до концаease-in- определяет эффект перехода с медленным стартомease-out- определяет эффект перехода с медленным окончаниемease-in-out- определяет эффект перехода с медленным началом и окончаниемcubic-bezier(n,n,n,n)- позволяет определить свои собственные значения в функции кубического Безье
В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:
Пример
#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 секунду:
Transition + Transformation (Переход + Трансформация)
В следующем примере добавляется эффект перехода к трансформации:
Больше примеров перехода
Свойства CSS перехода могут быть указаны по одному, например, так:
Пример
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Попробуйте сами »
или используя сокращенное свойство transition:
Проверьте себя с помощью упражнений!
CSS Свойства перехода
В следующей таблице перечислены все свойства перехода CSS:
| Свойство | Описание |
|---|---|
| transition | Сокращенное свойство для установки четырех свойств перехода в одно свойство |
| transition-delay | Определяет задержку (в секундах) для эффекта перехода |
| transition-duration | Определяет, сколько секунд или миллисекунд требуется эффекту перехода для завершения |
| transition-property | Указывает имя свойства CSS, для которого предназначен эффект перехода |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
