延迟CSS3转换

Question

我创建了一个CSS3菜单项，我想用一种特殊的方式显示articles项目：如果你点击第四个项目，它应该显示第一个，然后是第二个，然后第三个，它们之间有一个小的延迟，比如0.5秒。

同样，如果你点击第二个，它应该会弹出第一个和第二个小延迟后。

它应该很好&平滑：）

好吧，现在这仍然不是我想要实现的（这里是我所得到的真实版本http://jsfiddle.net/vH4DV/4/)

你认为我只能用CSS3吗？我应该使用Jquery吗？

谢谢你的帮助！

编辑

终于完成了，这是最终的现场版本http://jsfiddle.net/vH4DV/21/

Answer 1

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

代替：

   .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;
    }

对你的过渡更加具体。

.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;
}