Как CSS transitions применяются для создания анимаций при наведении мыши?

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

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

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

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

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

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