Как перевести одно свойство в 0 с, а все остальное в 1,5 с

Question

Я пытаюсь сразу перейти к контуру, но все остальные свойства медленно. Как я могу это сделать?

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: outline 0s, all 1.5s;
}

div:hover {
  outline: 4px dotted grey;
  width: 200px;
  background: blue;
}

<div>
</div>

Answer 1

Сделать outline последним в списке

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: all 1.5s, outline 0s;
}

div:hover {
  outline: 4px dotted grey;
  width: 200px;
  background: blue;
}

<div>
</div>

Если свойство указано несколько раз в значении transition-property (либо само по себе, через сокращение который содержит его, или через все значение ), затем переход, который запускается, использует функцию длительности, задержки и синхронизации по индексу, соответствующему последнему элементу в значении свойства-перехода , которая требует анимации этого свойства. ^ref

Answer 2

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: outline 0s, width 1.5s, background 1.5s;
}

div:hover {
  outline: 4px dotted grey;
  width: 200px;
  background: blue;
}

<div>
</div>