css3动画从底部向上升

animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/

升起来前

升起来后


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
        body{font:14px"微软雅黑","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
        li{list-style:none}
        li{
            float: left;
             25%;
            height: 200px;
            text-align: center;
        }
        img{
             200px;
            height: 200px;
        }
        .head{
             100%;
            height: 200px;
            position:absolute;
            animation:myfirst 2s;
            -webkit-animation:myfirst 2s;
            animation-fill-mode: forwards;/*当动画完成时，动画会停留在最后一帧。*/
            overflow: hidden;
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {height: 10px}
            25%  {height:50px;bottom:50%;}
            50%  {height:100px;bottom:50%;}
            75%  {height:160px; bottom:50%;}
            100% {height:200px;bottom:50%;
        }
        }
    </style>
</head>
<body>
<div class="head">
    <ul>
        <li>
            <img src="image/hb.png">
        </li>
        <li>
            <img src="image/jiang.png">
        </li>
        <li>
            <img src="image/kf.png">
        </li>
        <li>
            <img src="image/tubiao1.png">
        </li>
    </ul>
</div>
</body>
</html>