Thanks to visit codestin.com
Credit goes to developer.mozilla.org

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

transition

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨сентябрь 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

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

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

transition: margin-right 2s;
transition: margin-right 2s 0.5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out 0.5s;
transition:
  margin-right 2s,
  color 1s;
transition: all 1s ease-out;
<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>
#example-element {
  background-color: #e4f0f5;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeNot 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> значение, представляющее временну́ю функцию

  • ноль, одно или два <time> значения. Первое значение, которое может быть интерпретировано как время, присваивается transition-duration, а второе значение, которое может быть интерпретировано как время, присваивается transition-delay.

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

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

transition = 
<single-transition>#

<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time> ||
<transition-behavior-value>

<single-transition-property> =
all |
<custom-ident>

<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<transition-behavior-value> =
normal |
allow-discrete

<linear-easing-function> =
linear |
<linear()>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>

<step-easing-function> =
step-start |
step-end |
<steps()>

<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )

<steps()> =
steps( <integer> , <step-position>? )

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

Примеры

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

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

Specification
CSS Transitions
# transition-shorthand-property

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

[2] PPK test

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