По умолчанию плавный переход действует на все анимируемые свойства элемента. Такое поведение соответствует значению all свойства transition-property, это значение по умолчанию.

Такое поведение часто нежелательно, особенно когда в правиле много свойств.

Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:

transition-property: width;     // плавно меняется только ширина
transition-property: width, height; // плавно меняются ширина и высота

При этом так же через запятую можно задавать переходам разных свойств разную длительность:

transition-property: width, height;
transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5

Попробуем применить описанное свойство на практике. В этом примере у кнопки анимируются свойства background-color, transform и font-size.