Для создания плавных переходов между двумя состояниями элемента в CSS используется свойство transition. 12

Синтаксис: transition: property duration timing-function delay;. 2 В нём: 2

• property — определяет CSS-свойство, для которого будет применяться переход. 2 Можно указать несколько свойств, разделив их запятой. 2 Если указать all, переходы будут применяться ко всем свойствам элемента. 2
• duration — определяет длительность перехода. 2 Задаётся в секундах (s) или миллисекундах (ms). 2
• timing-function — определяет скорость перехода в разные моменты времени. 2 Наиболее часто используются следующие функции: linear, ease, ease-in, ease-out, ease-in-out. 2
• delay — время задержки перед началом перехода. 2 Задаётся в секундах (s) или миллисекундах (ms). 2

Пример использования: плавный переход цвета фона (background-color) для элемента p при наведении курсора: 2

p { background-color: blue; transition: background-color 1s ease-in-out; }p:hover { background-color: red; }< 2/code>

Некоторые нюансы использования свойства transition:

• Плавный переход происходит только при изменении значения свойства, а не при его добавлении или удалении. 3
• Некоторые свойства, такие как display и position, могут вызывать проблемы с плавными переходами, и их необходимо использовать с осторожностью. 3
• Не все свойства могут быть изменены с плавным переходом. 3 Например, свойство float не может быть использовано в свойстве transition. 3
• Плавные переходы не работают в старых браузерах, таких как Internet Explorer 9 и более ранних версиях. 3