How to start another transition only when one ends in CSS

Question

I was trying to make a navbar transition animation where I want a background color to appear on screen when someone clicks on the hamburger menu button of the navbar. The animation I want is that it first gains a vertical height of 100vh and then gains a width of 100% but when i tried, both animations are working together making it look like its growing out from the top left corner of the screen, I want the vertical height transition to occur first and then the width transition. My code is below

The below code runs when I clicked the hidden checkbox just to trigger the transition effect

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

And the below code is what I am trying to do to make the transition happen

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

I am just trying but its just not working :(

https://stackoverflow.com/questions/48119227/chain-sequence-animation-in-css Try this. — Yotam Dahan, May 11 '20 at 11:11

SMAKSS · Accepted Answer · 2020-05-11T11:17:50.127

As @CBroe said earlier width 1s is not a valid input for transition-delay. So in order to make it work, you should add your transition delay within your elements inline or separately by a single value (ms or s), just like this:

Inline:

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

Separately:

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

NOTE: For more information about it, you can read transition-delay or transition itself.

How to start another transition only when one ends in CSS

1 Answers1