transition-property

Властивість transition-property задає властивості, до яких буде застосовано ефект переходу. Значенням може бути одна властивість або список властивостей через кому. Значення за замовчуванням — all, тобто анімуються всі можливі властивості. Якщо потрібно задати більш ніж одну властивість, то вони вказуються через кому.

.box {
	color: orange;
  background-color: teal;
  transition-property: color, background-color;
}

.box:hover {
  background-color: orange;
	color: white;
}

.box {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  background-color: tomato;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);

  /*  Set transition values  */
  transition-property: background-color, transform;
  transition-duration: 500ms;
  transition-timing-function: linear;
  transition-delay: 0;
}

/* On hover, change the values of animated properties */
.box:hover {
  background-color: teal;
  transform: rotate(180deg);
}

P.S.transition - Всі властивості переходу можна поєднати в одну складову властивість