css创建平移和弹跳动画

// 向下移动动画
.move-down{
	animation-name: move-down;
	animation-duration: 0.8s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
//@keyframes move-up{ /* 向下弹跳*/
//  0% { transform: translateY(-25%)}
//  25% { transform: translateY(0)}
//  50% { transform: translateY(-25%)}
//  75% { transform: translateY(0)}
//  100% { transform: translateY(-25%)}
//}
@keyframes move-down{
	0% {
		transform: translateY(-25%)
	}
	100%{
		transform: translateY(0)
	}
}
// 向上移动动画
.move-up{
	animation-name: move-up;
	animation-duration: 0.8s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
//@keyframes move-up{ /* 向上弹跳*/
//  0% { transform: translateY(0)}
//  25% { transform: translateY(-25%)}
//  50% { transform: translateY(0)}
//  75% { transform: translateY(-25%)}
//  100% { transform: translateY(0)}
//}
@keyframes move-up{
	0% {
		transform: translateY(0)
	}
	100%{
		transform: translateY(-25%)
	}
}


// 循环跳动
.throbImageClass {
	position: relative;
	animation-name: jump;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@keyframes jump {
  0% {
    top: 45%;
  }
  50% {
    top: 70%;
  }
  100% {
    top: 45%;
  }
}