I attempted to create a unique transition animation for the navbar, where I envisioned a background color appearing on screen when the hamburger menu button is clicked. My goal was to have the background first increase in vertical height to 100vh and then expand in width to 100%. However, when I implemented my code, both animations seemed to activate simultaneously, giving the impression that the background was growing from the top left corner of the screen. What I truly desire is for the vertical height transition to take place before the width transition. The code snippet below illustrates my attempt.
When I clicked the hidden checkbox to trigger the transition effect, the following code executed:
&__checkbox:checked ~ &__background--1 {
bottom: 0;
width: 100%;
}
The code snippet below encapsulates my efforts to achieve the desired transition effect:
&--1 {
background: red;
width: 1rem;
z-index: 15;
bottom: 100%;
transition: bottom .3s, width 1s;
transition-delay: width 1s;
}
Despite my best attempts, the transition does not seem to be functioning as intended. It's quite frustrating!