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

transition

Универсальное свойство transition, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

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

Демо

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

Синтаксис

 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
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
    margin-right 4s,
    color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

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

Значения

none

Отменяет эффект перехода.

Примечание

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

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

Применяется ко всем элементам, к псевдоэлементам ::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
33
34
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>transition</title>
        <style>
            #bar {
                top: -5.5em;
                right: 5em; /* Положение */
                padding: 0.5em; /* Поля */
                margin: 0; /* Отступы */
                position: absolute; /* Абсолютное позиционирование */
                width: 2em; /* Ширина */
                background: #333; /* Цвет фона */
                color: #fff; /* Цвет текста */
                text-align: center; /* Выравнивание по центру */
                /* Переход */
                transition: top 1s ease-out 0.5s;
            }
            #bar:hover {
                top: 0;
            }
        </style>
    </head>
    <body>
        <ul id="bar">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>↓</li>
        </ul>
    </body>
</html>

Комментарии