首页 > 代码库 > css3 图标上下移动动画

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;}

  

css3 图标上下移动动画