マウスオーバー時はすぐに色が変わって、離れた時はゆっくり色が戻るみたいな

以下のように、transition-duration を元のスタイルと変化後のスタイルの両方に設定すればできる。

元のスタイルに設定した方が帰り (変化後→元) にかかる時間で、変化後のスタイルに設定した方が行き (元→変化後) にかかる時間となる。

/* 元のスタイル */
.example {
  background-color: #ddd;
  transition-property: background-color;
  transition-duration: 1s;  /* hover → 通常 */
}
/* 変化後のスタイル */
.example:hover {
  background-color: #f88;
  transition-duration: 0.2s;  /* 通常 → hover */
}

サンプル

マウスオーバー時はすぐ色が変わって、離れた時はゆっくり色が戻る。

See the Pen transition-duration by napoporitataso (@napoporitataso) on CodePen.