Переходы: transition-property

CSS/HTML

Переходы: transition-property

06-апр-2026, 16:59
984 просмотров
36 1

transition-property

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

В приведённом примере(см. Переходы: цвет), свойство background определено в значении transition-property. Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property, не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function.

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

.box {
  background: #2db34a;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

Свойства в переходах

Важно отметить, что не для всех свойств может быть выполнен переход, а только для свойств, которые имеют различимую точку на полпути. Цвета, размеры шрифтов и тому подобное могут переходить от одного значения к другому, поскольку у них есть распознаваемые значения в промежутке друг с другом. У свойства display, например, не может быть перехода, поскольку оно не имеет никакой средней точки. Набор наиболее популярных свойств, к которым применим переход следующий.