Ways to initiate an additional transition only after the completion of the previous one in CSS

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!

Answer №1

In a previous comment by @CBroe, it was mentioned that using width 1s as the input for transition-delay is invalid. To resolve this issue, you can ensure proper functionality by adding the transition delay directly within your elements either inline or separately, specifying a single value in milliseconds (ms) or seconds (s). Here's an example of both methods:

Inline:

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

Separately:

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

NOTE: To delve deeper into this topic, feel free to explore transition-delay or transition on Mozilla Developer Network.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tracking the movement of a handheld device through GPS technology

I am interested in creating a mobile application that can track the real-time location of users who have the app installed on their devices. The concept is to allow one or more users to follow the movement of another user using GPS on a map. I plan to deve ...

Shift the element upwards instead of scrolling down the page

I'm struggling with a design challenge on my website. Currently, the page layout consists of a navigation bar, a header section, and the main body content. I'm trying to achieve a scrolling effect where the body content moves up and over the head ...

Utilize Jquery to extract the functions from a PHP file

I'm a beginner with both jQuery and PHP. Currently, I have an HTML page where I need to utilize functions from a PHP file using jQuery, and then display the results in the HTML. My goal is to count the number of files in three different directories a ...

Utilizing a JavaScript/jQuery/alternative library extension for transforming HTML into XML format

Are there any JavaScript libraries that can convert HTML to XML? Can these libraries handle both clean HTML and real-world malformed (or 'dirty') HTML? Is there a JavaScript library available for this task, or would I need to use a server-side ...

Tips on incorporating a plus symbol (+) into a list using the <li> tag?

Is it possible to use a plus sign as the list style instead of Disc or Circle in <li> elements? li {list-style: disc...} ...

Issue with array merging/inserting feature not functioning as expected

Here are two arrays that I have: First Array: "workingHours": [ { "opening": "09:30", "closing": "13:30", "dayName": "sunday" }, { ...

Centered Fixed Upward Scrolling Div

Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with ...

Issues with displaying Angular Material's ng-messages in a dialog box

While working on a login form within a dialog, I noticed that the ng-messages for the respective input are not appearing. The validation is functioning properly as the input turns red when there's an error, and the button remains disabled until the va ...

What causes the odd centering of elements within Bootstrap5 rows on a card? Is there a way to ensure they are centered vertically?

Let me share with you an example of the work I have been doing. <!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544 ...

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

Is it possible to insert IE conditionals within functions.php in WordPress?

One common practice is to include the following script in the <head> section specifically for Internet Explorer 9. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Wh ...

Is it possible to continuously increase the value of a CSS property with each click?

I am trying to implement a feature where the value of an element decreases each time a different element is clicked. Currently, I have the following code: $("#trigger_heritage").click(function () { $(".heritage_content ul").css("margin-left", + -880); ...

Keep Variable-Height Element Corners Rounded to Perfection

I am facing a challenge with creating buttons that have perfectly rounded corners. The button is 50px high and the border radius is set to 25px, resulting in a perfect half-circle on each side of the button: It's pretty straightforward to achieve thi ...

How to create a transparent background effect in CSS for image with white background

I need help with two images on my website. One is a small icon that overlaps the first image, but since the icon has a white background, it creates a white square effect when placed on top. I want to avoid displaying this white background over my other i ...

Tips for positioning text at the bottom of a div without specifying a set height

I plan to extract the style later. My goal is to understand how to achieve this using pure HTML. I would like the Select and Description labels to be aligned with the bottom of the green box. Unfortunately, neither vertical-align: bottom; nor position: ab ...

Customizing label printing using HTML and CSS. Learn how to dynamically adjust label and container sizes based on label dimensions

After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues. Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. T ...

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

I am currently working with angularjs and bootstrap, incorporating nested onclick events using Angular's ng-click in various HTML elements. One is located in a table header to display different sort icons and execute the sorting logic when the header ...

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...