CSS transitions применяются для создания анимаций при наведении мыши следующим образом: для изменения стиля элемента при наведении на него курсора мыши используется псевдокласс :hover, а для плавного перехода применяется свойство transition, которое устанавливает время перехода. 12

Свойство transition позволяет устанавливать: 1

• время перехода для каждого свойства отдельно; 1
• время задержки перед выполнением перехода; 1
• функцию времени, согласно которой происходит изменение. 1

Пример использования: чтобы в течение полсекунды поменять цвет фона кнопки с синего на красный, код будет таким: 1

button {  background-color: blue;  transition: 0.5s;}button:hover {  background-color: red;}

Для сложной анимации элемента также используется свойство animation, работающее совместно с правилом @keyframes. 1 Анимация привязывается к элементу через псевдокласс :hover и свойство animation. 1