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

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

模板部分和css部分如下：

<div class="arrow_up">
	<span></span>
	<span></span>
</div>

.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(