css箭头循环动画

效果

HTML

<section>
	<!-- 箭头动画css -->
	<div class="leftJT1">
		<div class="list">
			<div class="cc rowup">
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
		</div>
		<i class="iconfont icon-weibiaoti1-copy"></i>
	</div>
	<div class="leftJT2">
		<div class="list">
			<div class="cc rowup">
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
		</div>
		<i class="iconfont icon-weibiaoti1-copy"></i>
	</div>
</section>

CSS

section {
	width: 600px;
	height: 300px;
	border: 1px solid red;
}
/* // 箭头动画 */
@mixin jianTou($top, $left, $bjColor) {
	position: absolute;
	top: $top;
	left: $left;
	width: 4px;
	height: 30%;
	transform: rotate(90deg);
	>i {
		position: absolute;
		left: -1.2rem;
		top: -5px;
		display: block;
		color: $bjColor;
		font-size: 2rem;
		transform: rotate(-90deg);
	}
	@keyframes rowup {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		100% {
			-webkit-transform: translate3d(0, -240px, 0);
			transform: translate3d(0, -240px, 0);
		}
	}
	.list {
		width: 4px;
		margin: 10px auto;
		position: relative;
		height: 200px;
		overflow: hidden;
	}
	.list .rowup {
		-webkit-animation: 5s rowup linear infinite normal;
		animation: 5s rowup linear infinite normal;
		position: relative;
		color: white;
		>div {
			>div {
				height: 20px;
				background-color: $bjColor;
				margin-top: 4px;
			}
		}
	}
}
.leftJT1 {
	position: relative;
	@include jianTou(0%,17%,#ffb571);
}
.leftJT2 {
	position: relative;
	@include jianTou(10%,17%,red);
}

粘贴复制一把梭~~~