Html 如何仅当一个转换以CSS结束时才开始另一个转换

我试图制作一个导航栏过渡动画，当有人点击导航栏的汉堡菜单按钮时，我希望屏幕上出现背景色。我想要的动画是，它首先获得100vh的垂直高度，然后获得100%的宽度，但当我尝试时，两个动画一起工作，使它看起来像是从屏幕左上角生长出来的，我希望首先发生垂直高度过渡，然后发生宽度过渡。我的代码在下面

下面的代码在我单击隐藏复选框以触发转换效果时运行

&__checkbox:checked ~ &__background--1 {
    bottom: 0;
    width: 100%;
}

下面的代码是我试图实现转换的代码

&--1 {
    background: red;
    width: 1rem;
    z-index: 15;
    bottom: 100%;
    transition: bottom .3s, width 1s;
    transition-delay: width 1s;
}

---

我只是在尝试，但它不起作用：（

正如@CBroe早些时候所说，

width 1s

不是

转换延迟的有效输入。
因此，为了让它起作用，您应该在元素中内联或单独添加一个值（
ms
或
s
），就像这样：

内联：

&--1{
背景：红色；
宽度：1em；
z指数：15；
底部：100%；
转换：底部.3s 1s，宽度1s 1s；/*名称|持续时间|延迟*/
}

分别：

&--1{
背景：红色；
宽度：1em；
z指数：15；
底部：100%；
过渡：底部。3s，宽度1s；
过渡延迟：1s，1s；
}

注意：有关它的详细信息，您可以阅读或阅读它本身。
宽度1s
不是
转换延迟的有效值。请尝试此操作。