Перейти к содержанию

transition-property

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

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* 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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

Комментарии