Как сделать анимацию в css при наведении

Чтобы создать анимацию при наведении (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, чтобы показать, что кнопку можно нажимать.

Таким образом, при наведении мыши на кнопку, ее размер увеличится с плавной анимацией.