Как сделать анимации css?

Для простого наведения хватит transition, например transition: transform 0.3s ease на кнопке с transform: scale(1.05) в hover, а вот если нужна анимация которая крутится сама по себе без действий пользователя, вроде спиннера загрузки или бегущей плашки, тогда бери @keyframes, описывай там процентные точки от 0 до 100 с нужными свойствами на каждой, а потом вешай на элемент animation с именем этого keyframes, длительностью, типом плавности и infinite если она должна крутиться бесконечно, не забывай про will-change: transform для тяжёлых анимаций, браузеру так проще их оптимизировать заранее, а не в момент когда анимация уже началась и начинает подтормаживать.

Простое: transition на изменение свойства. Сложное: @keyframes и animation для повторяющихся эффектов. Указывайте длительность и ease для плавности.