guanmao-wxapp/static/style/animation.css

@keyframes slide-top{
	from{
		transform: translateY(100%);
		/* opacity: 0; */
	}
	to{
		transform: translateY(0);
		/* opacity: 1; */
	}
}
@keyframes slide-bottom{
	from{
		transform: translateY(0);
		/* opacity: 0; */
	}
	to{
		transform: translateY(100%);
		/* opacity: 1; */
	}
}
@keyframes fade-in{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes fade-out{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@keyframes scaleB{
	from{
		transform: scale(0.5);
	}
	to{
		transform: scale(1);
	}
}
@keyframes scaleS{
	from{
		transform: scale(1);
		opacity: 1;
	}
	to{
		transform: scale(0);
		opacity: 0;
	}
}
@keyframes roate{
	from{
		transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
	}
}
@keyframes tiaowu {
	from {
		height: 25rpx;
	}

	to {
		height: 0rpx;
	}
}

@keyframes tiaowu2 {
	from {
		height: 10rpx;
	}

	to {
		height: 25rpx;
	}
}

@keyframes tiaowu3 {
	0% {
		height: 18rpx;
	}

	50% {
		height: 25rpx;
	}

	100% {
		height: 5rpx;
	}
}
.tiaowu {
	animation: tiaowu .5s ease infinite alternate;
}

.tiaowu2 {
	animation: tiaowu2 .5s ease infinite alternate;
}

.tiaowu3 {
	animation: tiaowu3 .5s ease infinite alternate;
}
.roate{
	animation: roate .7s linear infinite;
}
.slide-top{
	animation: slide-top .3s ease forwards;
}
.slide-bottom{
	animation: slide-bottom .3s ease forwards;
}
.fade-in{
	animation: fade-in .3s ease forwards;
}
.fade-out{
	animation: fade-out .3s ease forwards;
}
.scaleB{
	animation: scaleB .3s ease forwards;
}
.scaleS{
	animation: scaleS .3s ease forwards;
}