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.
