CSS3实现时间轴效果

最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果： 

有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应，故添加得自己一个一个设置。所以很多都是做成展示效果。
 
当然啦，自己也基于它的这个想法搞了一点简单点的类似效果，主要还是整个布局效果，具体每一块内容就不仿造了，而且我自己也加了一下开场动画，让它更好玩一些…
 
先来看看效果吧： 

大概效果就是这样啦，下来废话不说，还是直接进入主题：
 
HTML结构：

1. <div class="timezone">  
2.             <div class="time">  
3.                 <h2>2015-07-02</h2>  
4.                 <div>  
5.                     <p>暴走大事件第一季</p>  
6.                     <ul>  
7.   
8.                     </ul>  
9.                 </div>  
10.             </div>  
11.             <div class="timeLeft" style="top: 100px;">  
12.                 <h2>2015-07-02</h2>  
13.                 <div>  
14.                     <p>暴走大事件第二季</p>  
15.                     <ul>  
16.   
17.                     </ul>  
18.                 </div>  
19. </div>    
20.   

这里简化了一下HTML结构，.time类表示在右边，.timeLeft表示在左边，然后加点上外边距就可以了，每一块里面的内容我就删减掉了。
 
CSS样式代码如下：

1. body{   
2.                 background: #333;   
3.             }   
4.             h1{   
5.                 text-align: center;   
6.                 color:#fff;   
7.             }   
8.