css3如何向上_css3动画从底部向上升

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

升起来前

升起来后

Title

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;

width: 25%;

height: 200px;

text-align: center;

}

img{

width: 200px;

height: 200px;

}

.head{

width: 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%;

}

}