Свойство CSS transition

Свойство CSS transition является сокращённым для следующих свойств:

Свойство transition является одним из свойств CSS3.

Значения transition-duration и transition-delay можно указывать в любом порядке. Однако, если transition-duration опущено, по умолчанию оно принимает значение 0s, что предотвращает анимацию перехода.

Свойства разделяются запятыми.

INFO

Значение none является допустимым и отключает переходы для указанных свойств.

Свойство transition позволяет указать переход между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active, или с помощью JavaScript.

INFO

Префиксы поставщиков, такие как -webkit-, -moz- и -o-, являются устаревшими и, как правило, не требуются для современных браузеров.

Начальное значение	all 0s ease 0s
Применяется ко	Всем элементам, псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
Синтаксис DOM	Object.style.transition = "all 3s";

Синтаксис

Синтаксис свойства CSS transition

css

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Пример свойства transition с псевдоклассом :active:

Пример свойства CSS transition

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Пример свойства transition с псевдоклассом :hover:

Пример свойства CSS transition с псевдоклассом :hover

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Значения

Значение	Описание
transition-property	Указывает имена свойств для перехода.
transition-duration	Указывает длительность анимации перехода.
transition-timing-function	Указывает скорость изменения объекта во времени при переходе от одного значения к другому.
transition-delay	Указывает время ожидания перед началом анимации эффекта перехода.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какие свойства CSS Transition можно изменить?

Длительность переходаФункция времени переходаЗадержка перед началом переходаЦвет переходаПрозрачность перехода

Свойство CSS transition ​

Синтаксис ​

Пример свойства transition с псевдоклассом :active: ​

Пример свойства transition с псевдоклассом :hover: ​