Чтобы сделать анимацию при наведении курсора на элемент в CSS, нужно использовать псевдокласс :hover и свойство transition.
Давайте рассмотрим пример анимации при наведении курсора на кнопку:
button {
background-color: #1abc9c;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.5s ease;
}
button:hover {
background-color: #16a085;
}Здесь мы сначала определили стили для кнопки. Затем мы использовали псевдокласс :hover для создания эффекта анимации при наведении курсора на кнопку. С помощью свойства transition мы определили, какое свойство кнопки (в данном случае, это свойство background-color) должно изменяться в течение 0.5 секунды с плавным вхождением и выходом из эффекта.
В блоке, указанном после псевдокласса :hover, мы изменили свойство background-color на более темное значение, чтобы сделать эффект наведения более заметным.
Таким образом, при наведении курсора на кнопку, цвет фона будет изменяться с помощью анимации в течение 0.5 секунды. Это только пример, и вы можете изменять любые свойства для создания анимаций при наведении курсора на элемент.
