Css Transitions一个接一个

Question

我试着让 CSS transitions 一个接一个地播放，这意味着首先它必须变换宽度，然后变换高度。
我尝试了几个选项，但一切都是徒劳的。我在 javascript 中实现了这个但是一些 CSS 专业人士可以帮助探索这个并打破它。提前致谢。

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: all 2s;
}

div:hover {
    width: 300px;
    height:500px;
}
</style>

Answer 1

只需在 transition 简写中使用 transition-delay 属性，即可在一个 CSS 规则中按顺序执行多个转换。

-webkit-transition: width 2s, height 2s ease 2s;
transition: width 2s, height 2s ease 2s;