CSS переходы

CSS переходы

CSS-переходы позволяют平滑енно изменять значения свойств в течение заданного времени.

Переместите мышь на этот элемент, чтобы увидеть эффект CSS-перехода:

CSS

В этой главе вы узнаете о таких свойствах:

  • переход
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Поддержка браузеров для переходов

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

атрибуты Chrome IE Firefox Safari Opera
переход 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> размером 100px * 100px. Элемент <div> также указывает на эффект перехода для свойства width, продолжительностью 2 секунды:

пример

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Когда значение CSS-свойства (width) изменяется, начинается эффект перехода.

Теперь давайте установим новый значений для свойства width, когда мы наводим курсор на элемент <div>;

пример

div:hover {
  width: 300px;
}

попробуйте сами

Пожалуйста, обратите внимание, что при перемещении курсора с элемента, он постепенно возвращается к своему исходному стилю.

Изменение нескольких значений свойств

Ниже приведен пример добавления эффекта перехода к свойствам width и height, width - 2 секунды, height - 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) - Позволяет определить свои значения в三次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;
}

попробуйте сами

Более сложные примеры переходов

Вы можете указать CSS-параметры перехода по одному, например:

пример

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

попробуйте сами

или используйте сокращенный вариант переход атрибуты:

пример

div {
  transition: width 2s linear 1s;
}

попробуйте сами

CSS-параметры перехода

В таблице перечислены все CSS-параметры перехода:

атрибуты описание
переход Краткое свойство, используемое для установки одного свойства для четырех свойств перехода.
transition-delay Определяет задержку эффекта перехода в секундах.
transition-duration Определяет продолжительность эффекта перехода в секундах или миллисекундах.
transition-property Определяет имя CSS свойства, на которое влияет эффект перехода.
transition-timing-function Определяет скорость кривую для эффекта перехода.