transition-property¶

Свойство transition-property устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Переходы и Анимации

@keyframes

Синтаксис¶

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

Значения¶

none: Никакое свойство не задано.
all: Все свойства будут отслеживаться.
<свойство>: Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Примечание¶

Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition-property.
Opera до версии 12.10 поддерживает свойство -o-transition-property.
Firefox до версии 16 поддерживает свойство -moz-transition-property.

Значение по-умолчанию: all

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации¶

CSS Transitions

Поддержка браузерами¶

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition-duration</title>
    <style>
      body {
        margin: 0;
      }
      .menu {
        position: absolute;
        height: 100px;
        width: 100%;
        background: #fc0;
        border-bottom: 20px solid #333;
        top: -100px;
        /* Анимация */
        transition-property: top;
        transition-duration: 2s;
      }
      .menu:hover {
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      А здесь у нас будет своё меню с преферансом и
      профурсетками.
    </div>
  </body>
</html>