transition
==========

Свойство CSS **`transition`** - это `сокращённое свойство` для `transition-property` (en-US), `transition-duration`, `transition-timing-function` (en-US), и `transition-delay` (en-US).

Интерактивный пример
--------------------

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `transition-delay` (en-US): `0s`
* `transition-duration`: `0s`
* `transition-property` (en-US): всё
* `transition-timing-function` (en-US): `ease`
* `transition-behavior` (en-US): `normal`
 |
| Применяется к | все элементы, `::before` и `::after` псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `transition-delay` (en-US): как указано
* `transition-duration`: как указано
* `transition-property` (en-US): как указано
* `transition-timing-function` (en-US): как указано
* `transition-behavior` (en-US): как указано
 |
| Animation type | Not animatable |

Синтаксис
---------


```css
/\* Применить к 1 свойству \*/
/\* имя свойства | длительность \*/
transition: margin-left 4s;

/\* имя свойства | длительность | задержка \*/
transition: margin-left 4s 1s;

/\* имя свойства | длительность | временная функция | задержка \*/
transition: margin-left 4s ease-in-out 1s;

/\* Применить к 2 свойствам \*/
transition:
  margin-left 4s,
  color 1s;

/\* Применить ко всем изменённым свойствам \*/
transition: all 0.5s ease-out;

/\* Глобальные значения \*/
transition: inherit;
transition: initial;
transition: unset;
```


Свойство `transition` указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям `all` и `none`). Это включает в себя:

* ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
    + ключевое слово `none`
    + ключевое слово `all`
    + `<custom-ident>` именование свойства CSS.
* ноль или одно `<single-transition-timing-function>` (en-US) значение, представляющее временну́ю функцию
* ноль, одно или два `<time>` значения. Первое значение, которое может быть интерпретировано как время, присваивается `transition-duration`, а второе значение, которое может быть интерпретировано как время, присваивается `transition-delay` (en-US).

Посмотрите, что предпринимается когда у списков значений свойств разные длины. Вкратце, избыточные свойства, не подлежащие анимации, игнорируются.

### Формальное описание синтаксиса
```

transition =   
  <single-transition># (en-US)    
  
<single-transition> =   
  [ (en-US) none | (en-US) <single-transition-property> ] (en-US)  || (en-US)  
  <time>                                   || (en-US)  
  <easing-function>                        || (en-US)  
  <time>                                     
  
<single-transition-property> =   
  all             | (en-US)  
  <custom-ident>    
  
<easing-function> =   
  linear                          | (en-US)  
  <linear-easing-function>        | (en-US)  
  <cubic-bezier-easing-function>  | (en-US)  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                | (en-US)  
  ease-in                                             | (en-US)  
  ease-out                                            | (en-US)  
  ease-in-out                                         | (en-US)  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             | (en-US)  
  step-end                               | (en-US)  
  steps( <integer> , <step-position>? (en-US) )    
  
<linear-stop-list> =   
  [ (en-US) <linear-stop> ] (en-US)# (en-US)    
  
<step-position> =   
  jump-start  | (en-US)  
  jump-end    | (en-US)  
  jump-none   | (en-US)  
  jump-both   | (en-US)  
  start       | (en-US)  
  end           
  
<linear-stop> =   
  <number>               && (en-US)  
  <linear-stop-length>? (en-US)    
  
<linear-stop-length> =   
  <percentage>{1,2} (en-US)    
  
```

Примеры
-------

Примеры CSS переходов включены в главную статью о CSS переходах.

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

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

[2] PPK test

Смотрите также
--------------

* Использование CSS переходов
* `TransitionEvent` (en-US)