css的animate做一个信号动画

 

html

<div class="jump flex-fs fadeAndScaleIn">
    <span></span>
    <span></span>
    <span></span>
</div>

 

css

.jump{
	align-items: flex-end;
	min-height: 1.6rem;
	margin-top: .2rem;
	span{
		width: .36rem;
		display: block;
		background-color: #df0057;
		margin-right: .1rem; 
		&:nth-child(1){
			height: .8rem;
			animation: jumpMove1 .8s infinite;
			animation-timing-function:cubic-bezier(0,0,0.58,1);
			animation-delay: .1s;
		}
		&:nth-child(2){
			height: 1.4rem;
			animation: jumpMove2 .8s infinite;
			animation-timing-function:cubic-bezier(0,0,0.58,1);
			animation-delay: .2s;
		}
		&:nth-child(3){
			height: 1rem;
			animation: jumpMove3 .8s infinite;
			animation-timing-function:cubic-bezier(0,0,0.58,1);
			animation-delay: .3s;
		}
	}
}
@keyframes jumpMove1 {
	0% {
		height: .2rem;
	}
	20% {
		height: .4rem;
	}
	40% {
		height: .6rem;
	}
	60% {
		height: .6rem;
	}
	80% {
		height: .4rem;
	}
	100% {
		height: .2rem;
	}
}
@keyframes jumpMove2 {
	0% {
		height: .8rem;
	}
	20% {
		height: 1.2rem;
	}
	40% {
		height: 1.44rem;
	}
	60% {
		height: 1.44rem;
	}
	80% {
		height: 1.2rem;
	}
	100% {
		height: .8rem;
	}
}
@keyframes jumpMove3 {
	0% {
		height: .4rem;
	}
	20% {
		height: .66rem;
	}
	40% {
		height: .98rem;
	}
	60% {
		height: .98rem;
	}
	80% {
		height: .66rem;
	}
	100% {
		height: .4rem;
	}
}