====== transition-property ======
Властивість transition-property задає властивості, до яких буде застосовано ефект переходу. Значенням може бути одна властивість або список властивостей через кому.
Значення за замовчуванням — all, тобто анімуються всі можливі властивості.
Якщо потрібно задати більш ніж одну властивість, то вони вказуються через кому.
<code>
.box {
	color: orange;
  background-color: teal;
  transition-property: color, background-color;
}

.box:hover {
  background-color: orange;
	color: white;
}
</code>
<code>
.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);
}
</code>

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