一个接一个的Css过渡

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>

原文由 Ankanna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需使用 transition 速记中的 transition-delay 属性在一个 CSS 规则中按顺序执行多个转换。

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

原文由 litel 发布，翻译遵循 CC BY-SA 3.0 许可协议