html动画上下移动,css3 图标上下移动动画

@-webkit-keyframes bird{

0% {

-moz-transform: translate(0,0);

-webkit-transform: translate(0,0);

-o-transform: translate(0,0);

-ms-transform: translate(0, 0);

transform: translate(0,0);

}

25% {

-moz-transform: translate(0,-10px);

-webkit-transform: translate(0,-10px);

-o-transform: translate(0,-10px);

-ms-transform: translate(0, -10px);

transform: translate(0,-10px);

}

50% {

-moz-transform: translate(0,-20px);

-webkit-transform: translate(0,-20px);

-o-transform: translate(0,-20px);

-ms-transform: translate(0, -20px);

transform: translate(0,-20px);

}

75% {

-moz-transform: translate(0,-10px);

-webkit-transform: translate(0,-10px);

-o-transform: translate(0,-10px);

-ms-transform: translate(0, -10px);

transform: translate(0,-10px);

}

100% {

-moz-transform: translate(0,0);

-webkit-transform: translate(0,0);

-o-transform: translate(0,0);

-ms-transform: translate(0, 0);

transform: translate(0,0);

}

}

.qi:not(:target),.birds:not(:target),.hong:not(:target){

-webkit-animation-name: bird;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

-moz-animation-name: bird;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-iteration-count: infinite;

-o-animation-name: bird;

-o-animation-duration: 5s;

-o-animation-timing-function: linear;

-o-animation-iteration-count: infinite;

-ms-animation-name: bird;

-ms-animation-duration: 5s;

-ms-animation-timing-function: linear;

-ms-animation-iteration-count: infinite;

animation-name: bird;

animation-duration: 5s;

animation-timing-function: linear;

animation-iteration-count: infinite;

}

原文：http://www.cnblogs.com/xupeiyu/p/4146841.html