如何在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的值中多次指定属性(通过包含该属性的简写或通过all值(，则开始的转换使用持续时间、延迟、，以及索引处的时序函数，该索引对应于调用该属性动画的转换属性值中的最后一项^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>