/* -----------------------通用动画 -----------------------*/
/* 
动画从小到大
发光动画
闪动动画
上下移动
从右到左移动
从左到右移动
逆时针旋转
顺时针旋转
y轴旋转
x轴翻转
响铃动画 
 */

/* 动画从小到大/放大一次 */
.dhfd{
	animation: dhfd 1s linear both;
}
@keyframes dhfd{
	0%{
		transform: scale(0.3);
		opacity: 0.5;
	 }
	 100%{
		 transform: scale(1);
		 opacity: 1;
	 }
}
/* 动画从大到小/縮小一次 */
.dhsx{
	animation: dhsx 0.5s linear both;
}
@keyframes dhsx{
	0%{
		transform: scale(1.5);
		opacity: 0.5;
	 }
	 100%{
		 transform: scale(1);
		 opacity: 1;
	 }
}
/* 发光动画 /持续*/
.dhfg{
	animation: 2s dhfg ease-in-out infinite both;
}
@keyframes dhfg{
  0% {
    opacity: 0.7;
	filter:brightness(1);
  }
  40% {
    opacity: 1;
	filter:brightness(1.2);
  }
  80% {
    opacity: 0.7;
	filter:brightness(1);
  }
  100% {
    opacity: 0.7;
	filter:brightness(1);
  }
}
/* 闪动动画/持续 */
.dhsd{
	animation: dhsd 5s ease-in-out infinite;
}
@keyframes dhsd{
	0% {
		opacity: 0.3;
	}
	5% {
		opacity: 1;
	}
	10% {
		opacity: 0.3;
	}
	13% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
/* 上下移动 /持续*/
.dhsxyd{
	animation: dhsxyd 1.5s linear both infinite;
}
@keyframes dhsxyd{
	0%{
		transform: translateY(-1vh);
	 }
	 50%{
		 transform: translateY(0);
	 }
	 100%{
		 transform: translateY(-1vh);
	 }
 }
 /* 从右到左移动/持续 */
 .dhxyyd{
	animation: dhzyyd 3s linear infinite;
 }
 @keyframes dhzyyd{
 	0%{
 		right: 2vw;
 		opacity: 0;
 	}
 	50%{
 		right: 6vw;
 		opacity: 0.6;
 	}
 	75%{
 		right: 8vw;
 		opacity: 0.3;
 	}
 	100%{
 		right: 10vw;
 		opacity: 0;
 	}
 }
 /* 从左到右移动/持续 */
.dhxzyd{
	animation: dhxzyd 3s linear infinite;
}
@keyframes dhxzyd{
	0%{
		left: 2vw;
		opacity: 0;
	}
	50%{
		left: 6vw;
		opacity: 0.6;
	}
	75%{
		left: 8vw;
		opacity: 0.3;
	}
	100%{
		left: 10vw;
		opacity: 0;
	}
}
 /* 顺时针旋转动画 /持续 */
.dhsxz{
	animation: dhxz 3s linear both infinite;
}
@keyframes dhxz{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
 /* 逆时针旋转动画 /持续 */
.dhnxz{
	animation: dhnxz 3s linear both infinite;
}
@keyframes dhnxz{
	0%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(0);
	}
}
/* y轴旋转 */
.dhyxz{
	animation: dhyxz 4s infinite linear;
}
@keyframes dhyxz{
	0%{opacity: 1;transform: perspective(500px) rotateY(0deg);}
	33%{opacity: 0.25;transform: perspective(500px) rotateY(120deg);}
	66%{opacity: 0.7;transform: perspective(500px) rotateY(240deg);}
	100%{opacity: 1;transform: perspective(500px) rotateY(360deg);}
}
/* x轴翻转/一次 */
.dhxfz{
	animation: dhxfz 3s ease-in-out;
}
@keyframes dhxfz {
    0% {
        transform: perspective(400px) rotateX(90deg);
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0);
    }
}
/* 响铃动画 /持续*/
.dhxl{
	animation: dhxl 2s infinite;
}
@keyframes dhxl{
    0%{
		transform:scale(1);
	}
    10%,20%{
		transform:scale(0.9) rotate(-2deg);
	}
    30%,50%,70%,90%{
		transform:scale(1.1) rotate(2deg);
	}
    40%,60%,80%{
		transform:scale(1.1) rotate(-2deg);
	}
    100%{
		transform:scale(1) rotate(0);
	}
}
/* 从下到上显示 */
.dhxs{
	animation: dhxs 2s infinite;
}
@keyframes dhxs{
	0%{
		height: 0;
		width: 0;
	}
	100%{
		height: 47vh;
		width: 23vw;
	}
}
/* 从右进入显示数据 */
.dhyxs{
	animation: dhzxs 0.4s ease both;
}
@keyframes dhzxs {
	from {
		right: -38.25vw;
	}

	to {
		right: 0.8vw;
	}
}
/* 从右退出数据 */
.dhytc{
	animation: dhytc 0.4s ease both;
}

@keyframes dhytc {
	from {
		right: 0;
	}

	to {
		right: -38.25vw;
	}
}
/* 淡入-从左到右 */
.dhzdr{
	animation: drL 2s ease both;
}
@keyframes drL {
    0% {
        opacity: 0;
        transform: translateX(-50vw);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 淡入-从右到左 */
.dhydr{
	animation: drR 2s ease both;
}
@keyframes drR {
    0% {
        opacity: 0;
        transform: translateX(50vw);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 淡入-从下到上 */
.dhxdr{
	animation: drB 2s ease both;
}
@keyframes drB {
    0% {
        opacity: 0;
        transform: translateY(25vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 从右淡入 */
@keyframes drlx{
	0%{
		transform: translateX(100vw);
	}
	100%{
		transform: translateX(0);
	}
}
.dhylx{
	animation: drlx 2s ease both;
}
.char {
    opacity: 0;
    display: inline-block;
    animation-fill-mode: forwards;
}
@keyframes popup{
    0%{
    	transform: translateY(5vw);
    }
    100%{
    	transform: translateX(0);
		opacity: 1;
    }
}
.dhys1{
	 animation-delay: 0.1s;
 }
.dhys2{
	animation-delay: 0.2s;
}
.dhys3{
	animation-delay: 0.3s;
}
.dhys4{
	animation-delay: 0.4s;
}
.dhys5{
	animation-delay: 0.5s;
}
.dhys6{
	animation-delay: 0.6s;
}
.dhys7{
	animation-delay: 0.7s;
}
.dhys8{
	animation-delay: 0.8s;
}
.dhys9{
	animation-delay: 0.9s;
}
.dhys10{
	animation-delay: 1s;
}