W3docs
ru
Войти

Свойство CSS transition

How to use the CSS transition shorthand property which allows to specify the transition between two states of an element. See functions and try examples.

Свойство 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
Синтаксис DOMObject.style.transition = "all 3s";

Синтаксис

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

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

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

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

<!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

<!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 можно изменить?