W3docs
ru
Войти

Свойство CSS transition-property

How to use the CSS transition-property longhand property to specify a property name for the transition effect. See property values and try examples.

Свойство transition-property задаёт имена свойств, для которых выполняется переход. Оно принимает список имён свойств, разделённых запятыми, или ключевое слово all для перехода всех свойств элемента.

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

warning

Не все свойства в CSS можно анимировать.

info

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

Начальное значениеall
Применяется коВсем элементам, а также псевдоэлементам ::before и ::after.
НаследуетсяНет.
АнимацияНет (управляет тем, какие свойства анимируются, но само свойство не анимируется).
ВерсияCSS3
Синтаксис DOMobject.style.transitionProperty = "height";

Примечание: В современном CSS рекомендуется использовать сокращённое свойство transition.

Синтаксис

Значения transition-property в CSS

transition-property: none | all | property | initial | inherit;

Пример использования свойства transition-property:

Пример кода CSS для transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример свойства transition-property с переходом ширины и высоты:

Ещё один пример кода CSS для transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример свойства transition-property с переходом цвета фона:

Пример transition-property с переходом цвета фона:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Пример свойства transition-property с переходом цвета фона и смещения по оси X:

Пример transition-property с переходом цвета фона и смещения по оси X

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример свойства transition-property с переходом шрифта:

Пример CSS transition-property для свойств letter-spacing, font-size и line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
noneЭффект перехода не будет применён.
allЭффект перехода будет применён ко всем свойствам.
propertyЗадаёт список имён свойств CSS, разделённых запятыми, для эффекта перехода.
initialУстанавливает для этого свойства значение по умолчанию.
inheritНаследует это свойство от родительского элемента.

Практика

Практика

Какое утверждение верно относительно transition-property?