CSS-переходы позволяют плавно изменять CSS-свойства элементов, т.е. делать это не мгновенно (за 15-16 миллисекунд), а в течении необходимого Вам времени. Для работы с переходами всего существует 4 отдельных CSS-свойства и еще одно групповое. Начнем со свойства transition-duration, которое задает промежуток времени в секундах или миллисекундах, в течение которого должна произойти смена CSS-свойства с одного значения на другое. Например:  transition-duration: 2s; Следующее свойство - transition-property. В нем указывается название CSS-свойств, к которым будет применен эффект плавного перехода. Причем может быть указано как одно свойство, так и несколько через запятую...

Это и так знают все, но стоит освежить — потому что именно на этом строится всё остальное. Transitions — плавное изменение одного состояния в другое при смене класса или псевдокласса: .button { background: #1a1a2e; transform: scale(1); transition: background 0.2s ease, transform 0.15s ease; } .button:hover { background: #e94560; transform: scale(1.03); } Правило которое экономит много времени: анимируй только transform и opacity. Они работают на GPU и не вызывают reflow. top, left, width, height — всё это дорого и заметно на мобильных устройствах...