CSS свойство transition

CSS свойство transition - это сокращенная форма записи для следующих свойств:

Сначала необходимо установить свойство transition-duration, так как по умолчанию будет указано 0, и свойство не будет иметь эффекта.

Свойства указываются через запятые.

Если количество переходов больше одного и свойство transition-property одного из них установлено как "none", декларация будет недействительной.

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

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии),-moz- для Firefox,-o- для более старых версий Opera.

/tbody>

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 150px;
      height: 100px;
      background: #8ebf42;
      -webkit-transition: width 2s;
      -moz-transition: width 2s;
      -o-transition: width 2s;
      transition: width 2s;
      }
      div:active {
      width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition</h2>
    <p>Нажмите и удержите, чтобы увидеть эффект перехода.</p>
    <div></div>
  </body>
</html>

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

CSS свойство transition property

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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;
      -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
      left: 400px;
      background-color: #1c87c9;
      }
      .element-2 {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition</h2>
    <div class="example">
      <p>Наведите курсор мыши на контейнер и сами увидите результат.</p>
      <div class="element element-1"></div>
      <p>Нет перехода:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

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

Значения

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


26.0+ 1.0 -webkit-	12.0+	16.0+ 4.0 -moz- 49.0 -webkit-	6.1+ 3.0 -webkit-	12.1+ 15.0 -webkit-

26.0+
1.0 -webkit-

12.0+

16.0+
4.0 -moz- 49.0 -webkit-

6.1+
3.0 -webkit-

12.1+
15.0 -webkit-

CSS свойство transition

Синтаксис

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания