<div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

* {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    #preloader_1 {
        background-color: yellow;
    }
    
    #preloader_1 span {
        display: block;
        width: 9px;
        height: 10px;
        margin-top: 500px;
        margin-left: 200px;
        top: 0;
        text-align: center;
        background: #9b59b6;
        position: absolute;
        animation: preloader_1 1.5s infinite ease-in-out;
    }
    
    #preloader_1 span:nth-child(1) {
        left: 0;
    }
    
    #preloader_1 span:nth-child(2) {
        left: 11px;
        animation-delay: .2s;
    }
    
    #preloader_1 span:nth-child(3) {
        left: 22px;
        animation-delay: .4s;
    }
    
    #preloader_1 span:nth-child(4) {
        left: 33px;
        animation-delay: .6s;
    }
    
    #preloader_1 span:nth-child(5) {
        left: 44px;
        animation-delay: .8s;
    }
    /*使用这种方式进行Y轴变换时需要设置bottom为0才会显示双向延伸的效果*/
    
    @keyframes preloader_1 {
        0% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
        25% {
            height: 40px;
            transform: translateY(20px);
            background: #3498db;
        }
        50% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
        100% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
    }

示例代码：http://codepen.io/xiaokk06/pen/jqdeXy

希望知道的人解释一下，想了好久没想通

使用translateY实现css3 loading动画为什么需要设置bottom：0