Transition property css что это

transition property в CSS — это свойство, которое позволяет установить переход эффекта изменения одного или нескольких свойств CSS при изменении значения этих свойств. Это позволяет создавать плавные и анимированные переходы во время изменение одного состояния элемента на другое.

Transition property состоит из нескольких значений:

• transition-property — определяет свойство, переход которого будет анимирован. Значения могут быть как конкретными свойствами (например, opacity), так и all (все свойства элемента).
• transition-duration — определяет продолжительность перехода. Значения могут быть в секундах или миллисекундах.
• transition-timing-function — определяет тип перехода, такой как линейное, ease-in, ease-out, ease-in-out, steps, и другие. Эти значения задают изменения скорости анимации.
• transition-delay — задержка перехода перед началом анимации. Значения могут быть в секундах или миллисекундах.

Пример использования transition property:

.button {
  background-color: #4CAF50;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

.button:hover {
  background-color: #555555;
}

В этом примере при наведении на кнопку цвет фона кнопки будет плавно переходить от зеленого к серому цвету в течение 0.3 секунд с использованием функции плавности ease-in-out.