Conceal the div until the animation with a delay of `1s` has finished, then reveal it afterwards

Question

Conceal the div until the animation with a delay of `1s` has finished, then reveal it afterwards

I have incorporated a CSS file to introduce animations on the website I am currently developing. You can find it here:

The premise of this CSS file is straightforward - by adding specific class names to div elements, you can animate them as you scroll up or down the page.

I am looking to make a modification that will introduce a slight delay between each animation. This way, when scrolling past multiple animations in sequence, they will appear one after the other instead of all at once.

My plan involves creating a new class name, such as delay-1, which would apply animate-delay: 1s to the element.

For reference, you can view an example of the desired effect here. Scroll down and observe how "Our Progress" showcases each animation with a delay:

Can this be achieved using CSS3 alone? Any guidance or assistance on this matter would be greatly appreciated.

javascript jquery html css frontend

Answer 1

Answer №1

Indeed, utilizing CSS3 transition can achieve the desired effect. I have a demo page that has been set up for quite some time now, which you can take a look at.

In the demonstration, the first item applies a 2-second delay while the second item has no delay at all. Best of luck!

#demo:hover {
width: 300px;
transition-delay: 2s
}

#demo1:hover {
width: 300px;
transition-delay: 0s
}

http://jsfiddle.net/zFbkL/

Answer 2

Indeed, utilizing CSS3 transition can achieve the desired effect. I have a demo page that has been set up for quite some time now, which you can take a look at.

In the demonstration, the first item applies a 2-second delay while the second item has no delay at all. Best of luck!

#demo:hover {
width: 300px;
transition-delay: 2s
}

#demo1:hover {
width: 300px;
transition-delay: 0s
}

http://jsfiddle.net/zFbkL/

Answer 3

Answer №2

Here is a possible way to define the class:

.delay-1 {
    animation-delay: 1s !important;
    -webkit-animation-delay: 1s !important;
}

I'm not sure if it will be effective, but it's worth experimenting with. Yes, it did work for me and achieved the desired result.

Answer 4

Here is a possible way to define the class:

.delay-1 {
    animation-delay: 1s !important;
    -webkit-animation-delay: 1s !important;
}

I'm not sure if it will be effective, but it's worth experimenting with. Yes, it did work for me and achieved the desired result.

Answer 5

Answer №3

If you want to target different sections with transitions as you scroll using JavaScript, you can achieve this by applying classes and utilizing the nth-child() selector.

Let's consider a scenario where there are 4 steps:

.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }

However, if your section has an unknown number of steps, it might be more efficient to dynamically set these delays using scripting.

$('.steps .step').each(function(i){
  $(this).css('animation-delay', i + 's');
});

To trigger the animations, simply add a class to .steps.

.steps .step { transition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }

Hopefully, this helps you accomplish your desired effect.

Answer 6

If you want to target different sections with transitions as you scroll using JavaScript, you can achieve this by applying classes and utilizing the nth-child() selector.

Let's consider a scenario where there are 4 steps:

.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }

However, if your section has an unknown number of steps, it might be more efficient to dynamically set these delays using scripting.

$('.steps .step').each(function(i){
  $(this).css('animation-delay', i + 's');
});

To trigger the animations, simply add a class to .steps.

.steps .step { transition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }

Hopefully, this helps you accomplish your desired effect.

Conceal the div until the animation with a delay of `1s` has finished, then reveal it afterwards

Answer №1

Answer №2

Answer №3

Similar questions

SlickGrid checkbox formatter/editor experiencing issues with data consistency

What is the best way to automatically have the first bar in a column highchart be selected when the page loads?

Retrieve a string value in Next.JS without using quotation marks

Error: The property 'updateOne' cannot be read because it is undefined

An issue occurred while running the "gulp test" command due to a problem with the 'gulp-tslint-log'

The function of hasClass within an if statement appears to be malfunctioning

Transforming the hide/show functionality from JQuery to Vue

Executing PHP scripts using Ajax

What is the best approach for handling @RequestParam in a JSP file?

CSS shimmer effect does not smoothly transition between borders

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)

Unable to adjust the size of a DIV with a button click in Vue3

Managing errors in jQuery.ajax() when it encounters a problem

Trouble reading property 'map' in a react-redux todo application

Align a div to the center horizontally at the top of the screen

Using CSS to place the h1 text on top of an image

Guide on updating directory images by uploading a new one directly onto the site

Utilizing jQuery's .clone() function to duplicate HTML forms with radio buttons will maintain the radio events specific to each cloned element

Validating dynamic textboxes in Angular with custom rules

My current objective is to extract the information from a specific item within a combobox by implementing the following code