Чтобы создать анимацию при наведении (hover) в CSS, можно использовать псевдокласс :hover в сочетании с плавным переходом между значениями свойств. Например, мы хотим создать анимацию увеличения размера кнопки при наведении на нее мышкой:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.button:hover {
transform: scale(1.1);
cursor: pointer;
}
Здесь мы задаем начальные стили для кнопки .button, а также устанавливаем плавный переход между значениями свойства transform.
Затем мы используем псевдокласс :hover, чтобы задать новые стили при наведении на кнопку. Мы устанавливаем значение transform: scale(1.1), чтобы увеличить размер кнопки на 10%. Также мы добавляем свойство cursor: pointer, чтобы показать, что кнопку можно нажимать.
Таким образом, при наведении мыши на кнопку, ее размер увеличится с плавной анимацией.





