Delay CSS3 transitions

Question

I created a CSS3 menu item, i want to display the articles item in a special way : If you click on the 4th items it should display the first one, then the second one, then the third with a small delay between them, like 0.5s.

In the same way, ifyou click onthe 2nd it should popup the first one and the second one after a small delay.

It's supposed to nice & smooth :)

Well, now it's still not what i want to achieve( here a live version of what i got http://jsfiddle.net/vH4DV/4/)

Do you think i can do this with CSS3 only ? Should i use Jquery ?

Thanks for your help !

EDIT

Finally get this done, here is the final live version http://jsfiddle.net/vH4DV/21/

I think you can only do this via JavaScript...but I would love to learn a CSS solution if one exists — stackErr
– stackErr, Commented Jun 27, 2013 at 13:57

Derek Story · Accepted Answer · 2013-06-27 14:52:59Z

http://jsfiddle.net/derekstory/vH4DV/19/

Instead of:

   .ac-container input:checked ~ article{  
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    }

Be more specific for your transitions.

.ac-container input:checked ~ .how{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
    opacity:1;
}

.ac-container input:checked ~ .About{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
}
.ac-container input:checked ~ .references{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
}
.ac-container input:checked ~ .contact{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .9s;
    -webkit-transition-delay: .9s;
}

Oh i do not forget, i just trying to fix some stuff: the width of the "article" are not ok, and the menu works backwards. The first button shows 4 articles it should drop down only one, the 2nd button should shows 3 articles etc...

Collectives™ on Stack Overflow

Delay CSS3 transitions

EDIT

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

3 Comments

Related