/* 360左右翻转动画 */
.donghua {
	animation: fadenum 1s;
	animation-fill-mode: both;
}

@keyframes fadenum {
	100% {
		transform: rotateY(360deg);
		opacity: 1;
	}
}

/* 360左右翻转动画 */
.donghuar {
	animation: fadenumr 1s;
	animation-fill-mode: both;
}

@keyframes fadenumr {
	100% {
		transform: rotatex(0deg);
		opacity: 1;
	}
}


.donghuat {
	animation: fadenumt 1s;
	animation-fill-mode: both;
}

@keyframes fadenumt {
	0 {
		transform: rotate(60deg);
		opacity: 0.2;
	}
	25% {
		transform: rotate(120deg);
		opacity: 0.4;
	}
	50% {
		transform: rotate(180deg);
		opacity: 0.6;
	}
	80% {
		transform: rotate(240deg);
		opacity: 0.8;
	}
	100% {
		
		transform: rotatex(0deg);
		opacity: 1;
	}
}


.out{
	animation: outs 1s;
	animation-fill-mode: both;
}
@keyframes outs {
	0 {
		opacity: 1;
	}
	25% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.6;
	}
	80% {
		opacity: 0.3;
	}
	100% {
		opacity:0;
	}
}


/* 360上下翻转动画 */
.donghuax {
	animation: fadenumx 1s;
}

@keyframes fadenumx {
	100% {
		transform: rotate(360deg);
	}
}


.donghuaxt {
	animation: fadenumxt 1s;
	animation-fill-mode: both;
}

@keyframes fadenumxt {
	0 {
		opacity: 0;
	}

	25% {
		opacity: 0.5;
	}

	100% {
		transform: rotate(0deg);
		opacity: 1;
	}
}

.donghuaxt-scale {
	animation: fadenumxt-scale 1s;
	animation-fill-mode: both;
}

@keyframes fadenumxt-scale {


	100% {
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
}

/* 心跳动画 */
.heartbeat {
	animation: heart 2s infinite;
	animation-fill-mode: both;
}

.heartbeats {
	animation: heartT 2s infinite;
	animation-fill-mode: both;
}

@keyframes heart {
	0% {
		transform: scale(1.1);
		opacity: 1;
	}
    50% {
    	transform: scale(1);
    	opacity: 0.5;
    }
	100% {
		
		transform: scale(1.1);
		opacity: 1;
	}
}

@keyframes heartT {
	0% {
		transform: scale(1);
		opacity: 0.3;
	}

	50% {
		transform: scale(1.1);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 0.3;
	}
}

/* 心跳动画 */
/* 上下滑动 */
.dot {
	animation: yAxis 2s infinite;
}

@keyframes yAxis {
	50% {
		transform: translateY(0.1rem);
	}
}

/* 上下滑动 */
/* 左右滑动 */
.about {
	animation: xAxis 2s infinite;
}

@keyframes xAxis {
	50% {
		transform: translateX(0.2rem);
	}
}

/* 左右滑动 */

.xie-skewX {
	animation: skewX 1s;
	animation-fill-mode: both;
}

@keyframes skewX {
	0 {
		opacity: 0;
	}

	50% {
		opacity: 0.5;
		transform: skewX(-10deg);
	}

	100% {
		opacity: 1;
	}
}


/* 闪动特效1 */
.opacity {
	animation: opacity 0.5s 1;
	animation-fill-mode: both;
}

@keyframes opacity {
	100% {
		opacity: 1;
	}
}

/* 闪动特效1 */
/* 闪动特效2 */
.opacityl {
	animation: opacityl 1s 1;
	animation-fill-mode: both;
}

@keyframes opacityl {
	0 {
		opacity: 0;
	}

	50% {
		opacity: 0.3;
		transform: translateY(0.2rem);
	}

	100% {
		opacity: 1;
	}
}

/* 闪动特效2 */
/* 闪动特效3 */
.opacityx {
	animation: opacityx 1s 1;
	animation-fill-mode: both;
}

@keyframes opacityx {
	0 {
		opacity: 0;
	}

	50% {
		opacity: 0.3;
		transform: translateX(0.2rem);
	}

	100% {
		opacity: 1;
	}
}

/* 闪动特效3 */