qy_bigScreen/src/assets/styles/ball-running-animate.css

.ball-running-dots {
	position: absolute;
	top: 0.2rem;
}
.left-dots {
	left: 136px;
}
.right-dots {
	right: 200px;
}
.ball-running-dots > div {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.ball-running-dots {
	display: block;
	font-size: 0;
	color: #316fd9;
}
.ball-running-dots > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor;
}
.ball-running-dots {
	width: 16px;
	height: 16px;
}
.ball-running-dots > div {
	position: absolute;
	margin-left: 30px;
	border-radius: 100%;
}
.left-dots > div {
	animation: ball-running-dots-animate 2s linear infinite;
}
.right-dots > div {
	animation: ball-running-dots-animate2 2s linear infinite;
}
.ball-running-dots > div:nth-child(1) {
	animation-delay: 0s;
}
.ball-running-dots > div:nth-child(2) {
	animation-delay: -0.8s;
}
.ball-running-dots > div:nth-child(3) {
	animation-delay: -1.2s;
}
.ball-running-dots > div:nth-child(4) {
	animation-delay: -1.6s;
}
@keyframes ball-running-dots-animate {
	0%{
		width: 100%;
		height: 100%;
		transform: translateY(0) translateX(-500%) scale(-.1);
    opacity: 0.5;
	}
	80% {
		transform: translateY(0) translateX(0);
	}
	85% {
		width: 100%;
		height: 100%;
		transform: translateY(-125%) translateX(0);
	}
	90% {
		width: 200%;
		height: 75%;
	}
	95% {
		width: 100%;
		height: 100%;
		transform: translateY(-100%) translateX(-500%);
	}
  100% {
    width: 100%;
		height: 100%;
		transform: translateY(0) translateX(-500%);
    opacity: 1;
	}
}
@keyframes ball-running-dots-animate2 {
	0%{
		width: 100%;
		height: 100%;
		transform: translateY(0) translateX(500%) scale(-.1);
    opacity: 0.5;
	}
	80% {
		transform: translateY(0) translateX(0);
	}
	85% {
		width: 100%;
		height: 100%;
		transform: translateY(-125%) translateX(0);
	}
	90% {
		width: 200%;
		height: 75%;
	}
	95% {
		width: 100%;
		height: 100%;
		transform: translateY(-100%) translateX(500%);
	}
	100% {
		width: 100%;
		height: 100%;
		transform: translateY(0) translateX(500%);
    opacity: 1;
	}
}