CSS- переходы
CSS-переходы
Переходы CSS позволяют плавно изменять значения свойств в течение заданного времени.
Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:
В этой главе вы узнаете о следующих свойствах:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Браузерная поддержка переходов
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
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 |
Как использовать переходы CSS?
Чтобы создать эффект перехода, вы должны указать две вещи:
- свойство CSS, к которому вы хотите добавить эффект
- продолжительность эффекта
Примечание. Если часть продолжительности не указана, переход не будет иметь никакого эффекта, поскольку значение по умолчанию равно 0.
В следующем примере показан красный элемент <div> размером 100 пикселей * 100 пикселей. Элемент <div> также определил эффект перехода для свойства ширины с продолжительностью 2 секунды:
Пример
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Эффект перехода начнется, когда указанное свойство CSS (ширина) изменит значение.
Теперь давайте укажем новое значение свойства ширины, когда пользователь наводит указатель мыши на элемент <div>:
Пример
div:hover
{
width: 300px;
}
Обратите внимание, что когда курсор мыши выходит за пределы элемента, он постепенно возвращается к исходному стилю.
Изменить несколько значений свойств
В следующем примере добавляется эффект перехода как для свойства ширины, так и для свойства высоты с продолжительностью 2 секунды для ширины и 4 секунды для высоты:
Пример
div
{
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)
- позволяет вам определять свои собственные значения в кубической функции Безье
В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:
Пример
#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;
}
Дополнительные примеры переходов
Свойства перехода CSS можно указать одно за другим, например:
Пример
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
или с помощью сокращенного свойства transition
:
Пример
div
{
transition: width 2s linear 1s;
}
Свойства перехода CSS
В следующей таблице перечислены все свойства перехода CSS:
Property | Description |
---|---|
transition | A shorthand property for setting the four transition properties into a single property |
transition-delay | Specifies a delay (in seconds) for the transition effect |
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-timing-function | Specifies the speed curve of the transition effect |