CSS Transitions
Переходы CSS
Переходы CSS позволяют изменять значения свойств плавно (от одного значения к другому) за заданную длительность.
Пример: Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:
Поддержка браузеров для переходов
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Как использовать CSS переходы?
Чтобы создать эффект перехода, необходимо указать две вещи:
- свойство CSS, к которому требуется добавить эффект
- Длительность эффекта
Примечание: Если часть Duration не указана, переход не будет иметь эффекта, так как значение по умолчанию равно 0.
В следующем примере показан элемент 100px * 100px Red <div>. Элемент <div> также указал эффект перехода для свойства Width с длительностью 2 секунды:
Пример
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
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
указывает кривую скорости эффекта перехода.
Свойство "переход-синхронизация-функция" может иметь следующие значения:
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 секунду перед началом:
Пример
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
Переход + трансформация
В следующем примере также добавляется преобразование в эффект перехода:
Пример
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
}
Другие примеры перехода
Свойства перехода CSS можно задать по одному, например:
Пример
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
или с помощью сокращенного свойства transition
:
Пример
div
{
transition: width 2s linear 1s;
}
Свойства перехода CSS
В следующей таблице перечислены все свойства перехода CSS:
Свойство | Описание |
---|---|
transition | Сокращенное свойство для задания четырех свойств перехода в одно свойство |
transition-delay | Указывает задержку (в секундах) для эффекта перехода |
transition-duration | Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода |
transition-property | Задает имя свойства CSS, для которого используется эффект перехода |
transition-timing-function | Определяет кривую скорости эффекта перехода |