css3:animation实现时间轴动画

1.效果预览

2.实现步骤

建立时间轴的整个div结构

<div class="memorial_day">     外层盒子
        <div class="time_axis"></div>       动画时间轴
        <ul>
            <li class="n1">                              节点信息
                <a href="#">初识计算机</a>
                <div class="dataview">2015-09</div>
            </li>
            <li class="n2">
                <a href="#">加入实验室</a>
                <div class="dataview">2016-06</div>
            </li>
            <li class="n3">
                <a href="#">接触HTML</a>
                <div class="dataview">2017-09</div>
            </li>
            <li class="n4">
                <a href="#">完成第一个blog</a>
                <div class="dataview">2018-01</div>
            </li>
        </ul>
</div>

添加基础样式（可选）

* {margin: 0;padding: 0;}
body {font: 14px "微软雅黑", Arial, Helvetica, sans-serif;}
ul, li { list-style: none; }
a:link, a:visited, a:active { text-decoration: none;}
a:hover {text-decoration: none;}

定义外层盒子样式

.memorial_day {
            width:840px;       
            overflow: hidden;
            position: relative;        /*因为有个子元素要用absolute*/
            padding:60px;
        }

定义时间轴样式+动画

.time_axis {
           background: #e9f5fb;
           height: 6px;
           width: 100%;     
           -webkit-animation: time_a 5s;      /*定义动画名字以及播放时间*/
              -moz-animation: time_a 5s;
                -o-animation: time_a 5s;
                   animation: time_a 5s;
}
/*因为只写了四个事件，所以我这里分成了四个事件段*/
@keyframes time_a {
            0% { width:0px; }
            25% { width:250px; }
            50% { width:500px; }
            100% { width:840px; }         /*总长度和外盒子一样长*/
 }
@-webkit-keyframes time_a {     
            0% { width:0px; }
            25% { width:250px; }
            50% { width:500px; }
            100% { width:840px; }
 }
@-moz-keyframes time_a {
            0% { width:0px; }
            25% { width:250px; }
            50% { width:500px; }
            100% { width:840px; }
 }
@-o-keyframes time_a {
            0% { width:0px; }
            25% { width:250px; }
            50% { width:500px; }
            100% { width:840px; }
}

定义对话框里时间的样式

.dataview {
            position:absolute;
            top:-50px;     /*位置不好掌握的话，可以完成后面的再来调整,总之在时间轴之上*/
            left:20px;
            background:url(images/dtime.png) no-repeat;/*图片资源就在下面*/
            color:#fff;
            height:46px;
            width:88px;
            line-height:30px;
            text-align: center;
}

定义时间轴上的事件

.memorial_day ul li a {
            margin-top:30px;
            display:block;
            color:#000;
 }

定义伪类元素（时间轴上的时间节点）

.memorial_day ul li::before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            position: absolute;      /*这里一定要绝对定位，让节点圆圈钉在li的左上角*/
            background: #0979b1;
            border: 3px solid #e9f6fb;
}
.memorial_day ul li:hover::before {
            background: #075498;
            border: 3px solid #e9f6fb;
}

分别固定不同事件在时间轴上的位置

.memorial_day ul li.n1 {
            position: absolute;
            top: 54px;
            left: 90px;
        }
        .memorial_day ul li.n2 {
            position:absolute;
            top:54px;
            left:250px;
        }
        .memorial_day ul li.n3 {
            position:absolute;
            top:54px;
            left:500px;                /*建议中间的事件的位置和上面定义动画的不同位置重合，感觉更好看*/
        }
        .memorial_day ul li.n4 {
            position:absolute;
            top:54px;
            left:840px;
        }

完成>.<