Question

161

How can I add a time delay to my divs, so they appear one after the other like a powerpoint slide?

rated 0 times [ 167] [ 6] / answers: 1 / hits: 24597 / 10 Years ago, thu, july 24, 2014, 12:00:00

So say I want div 1 to appear after 2 seconds, div 2 to appear after 7 seconds, and div 3 to appear after 15 seconds.

Is there a way for me to add an inline style element that will make the divs go from hidden but occupying space to fully visible.

I've been searching and most things I've found are hover/click triggered. I can't seem to find anything with a time trigger.

Thank you.

Edit: To make this more clear, I am looking for any kind of code that has a time delay to appear. When I search transition, I get a bunch of code based on actions, like a click or a hover. I am not looking for a user action to trigger this, just a time.

When I search for animation, I get a bunch of results about moving images, which I also do not need.

When I search for time delay, I get a bunch of results about time delay transitions, which is how long after the user action occurs does the transition occur which still requires user input, and I do not want user input.

I am more asking what I should be looking for, if there is a word for it or something you are familiar that does this. I didn't provide any code because I don't want you coding me something. I'm asking for lead, because it is frustrating that I cannot find the proper word to identify what I need.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sophiak

Add To Favorites

Follow

Total Points: 242

Total Questions: 90

Total Answers: 103

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 10 Years ago faithemilys · Accepted Answer

you can either use a css transition to animate the visibility property after a set delay in your stylesheet, or you can change the visibility property using JS and setTimeout();

HTML

<div id=div1 style=visibility:hidden;></div>

JS

setTimeout(function(){

document.getElementById('div1').style.visibility = visible;

},1000);

This sets a callback to override the css property after 1000 ms, or 1 second.

For a pure css solution we can use this instead. We need to provide multiples of a few properties, for cross platform compatibility.

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {

    opacity:0;

    -webkit-animation:fadeIn ease-in 1;

    -moz-animation:fadeIn ease-in 1;

    animation:fadeIn ease-in 1;



    -webkit-animation-fill-mode:forwards; 

    -moz-animation-fill-mode:forwards;

    animation-fill-mode:forwards;



    -webkit-animation-duration:1s;

    -moz-animation-duration:1s;

    animation-duration:1s;

}

So this class called fade-in adds a 1s animation to any element it's added to, it will start as soon as it's loaded as it is. It's opacity based so the object will take up space when it's invisible, if you don't want this you need to use a variation on display:none.

A delay can be added to an element using

-webkit-animation-delay: 2s;

-moz-animation-delay: 2s;

animation-delay: 2s;

Just set that with a different value for each 'slide' to get them to fade in at different times.