手机端 不断向上或者向下跳动的 提示箭头

现在，手机端微信中经常会出现按页浏览的宣传性的页面。其中每一页的最下方会出现 向上跳动的箭头，用来提醒用户向下滑动到下一页，继续浏览。本文介绍如何用css编写这个提示箭头。动效如下图所示

模板部分和css部分如下：

.arrow_up{                   //居中
	position: absolute;
	left: 50%;
	bottom: 100px;
	color: white;
}
.arrow_up span{              //箭头形状设置
	position: absolute;
	width: 20px;
	height: 20px;
	top: 10px;
	-webkit-transform:rotate(45deg);
	border-top: 1px solid white;
	border-left: 1px solid white;
	margin-left: -10px;
	opacity: 0;
	-webkit-animation: up 2s infinite;
	animation: up 2s infinite;
}
.arrow_up span:nth-of-type(2){
	top: 20px;
}
.arrow_up span:nth-of-type(1){
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}
@-webkit-keyframes up{   //动画设置
	0%{
		opacity: 0;
		-webkit-transform: translate(0, 0) -webkit-rotate(45deg);
	}
	50%{
		opacity: 1;
		-webkit-transform: translate(0, -20px) -webkit-rotate(45deg);
	}
	100%{
		opacity: 0;
	}
}
@keyframes up{
	0%{
		opacity: 0;
		transform: translate(0, 0) rotate(45deg);
	}
	50%{
		opacity: 1;
		transform: translate(0, -20px) rotate(45deg);
	}
	100%{
		opacity: 0;
	}
}

呈现效果为2个向上的箭头，不断向上跳跃。