Как сделать transition в css

Свойство transition позволяет задавать плавные изменения свойств элементов в CSS.

Для создания transition нужно сначала выбрать элемент, к которому она будет применена, используя селектор CSS. Затем нужно задать начальные и конечные значения свойства, которое мы хотим изменить. Например, мы можем использовать эту технику, чтобы сделать плавное изменение цвета фона при наведении курсора на элемент:

button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

В этом примере мы выбрали кнопку с помощью селектора CSS button. Мы также установили начальный цвет фона (background-color: #3498db;) и добавили transition для свойства background-color.

Значение 0.3s указывает длительность анимации (в данном случае 0,3 секунды), а ease — это функция изменения скорости, определяющая, как быстро должна понижаться скорость анимации.

Когда курсор наводится на кнопку (:hover), мы меняем цвет фона на более темный. Это приводит к плавному изменению цвета фона в течение 0,3 секунды (заданной в свойстве transition).

Вы можете использовать «transition» для изменения любого свойства CSS, такого как цвет, фон, шрифт, размер, положение и другие. Свойство transition можно добавить к любому элементу, следуя тем же шаблону, как и в примере выше.