/* 小兴言前端动画特效库 */
/* 渐变特效 */
.jbinleft{
	position: relative;
	animation: jbinleft 1s;
}
.jbinright{
	position: relative;
	animation: jbinright 1s;
}
.jbinup{
	position: relative;
	animation: jbinup 1s;
}
.jbindown{
	position: relative;
	animation: jbindown 1s;
}
.jbincenter{
	position: relative;
	animation: jbincenter 1s;
}
.jbinoutside{
	position: relative;
	animation: jbinoutside 1s;
}
@keyframes jbinleft{
	0%{transform: translateX(-100%);opacity: 0;}
	100%{transform: translateX(0);opacity: 1;}
}
@keyframes jbinright{
	0%{transform: translateX(100%);opacity: 0;}
	100%{transform: translateX(0);opacity: 1;}
}
@keyframes jbinup{
	0%{transform: translateY(100%);opacity: 0;}
	100%{transform: translateY(0);opacity: 1;}
}
@keyframes jbindown{
	0%{transform: translateY(-100%);opacity: 0;}
	100%{transform: translateY(0);opacity: 1;}
}
@keyframes jbincenter{
	0%{transform: scale(0.8,0.8);opacity: 0;}
	100%{transform: scale(1,1);opacity: 1;}
}
@keyframes jbinoutside{
	0%{transform: scale(1.2,1.2);opacity: 0;}
	100%{transform: scale(1,1);opacity: 1;}
}
/* 急停特效 */
.jtinleft{
	position: relative;
	animation: jtinleft 1s;
}
.jtinright{
	position: relative;
	animation: jtinright 1s;
}
.jtinup{
	position: relative;
	animation: jtinup 1s;
}
.jtindown{
	position: relative;
	animation: jtindown 1s;
}
@keyframes jtinleft{
	0%{transform: translateX(-1000%);}
	20%{transform: translateX(0);}
	40%{transform: skewX(-20deg);}
	60%{transform: skewX(15deg);}
	80%{transform: skewX(-5deg);}
	100%{transform: skewX(0deg);}
}
@keyframes jtinright{
	0%{transform: translateX(1000%);}
	20%{transform: translateX(0);}
	40%{transform: skewX(20deg);}
	60%{transform: skewX(-15deg);}
	80%{transform: skewX(5deg);}
	100%{transform: skewX(0deg);}
}
@keyframes jtinup{
	0%{transform: translateY(1000%);}
	20%{transform: translateY(0);}
	40%{transform: scaleY(0.5);}
	60%{transform: scaleY(1.2);}
	80%{transform: scaleY(0.8);}
	100%{transform: scaleY(1);}
}
@keyframes jtindown{
	0%{transform: translateY(-1000%);}
	20%{transform: translateY(0);}
	40%{transform: scaleY(0.5);}
	60%{transform: scaleY(1.2);}
	80%{transform: scaleY(0.8);}
	100%{transform: scaleY(1);}
}
/* 波纹特效 */
@keyframes xxyrounded{
  0% {
    box-shadow: 0 0 0 0 rgba(0,117,237,0.1), -45px -45px 0 64px rgba(0,117,237,0.1), -90px -90px 0 122px rgba(0,117,237,0.1), -135px -135px 0 186px rgba(0,117,237,0.1);
  }
  100% {
    box-shadow: -45px -45px 0 64px rgba(0,117,237,0.1), -90px -90px 0 122px rgba(0,117,237,0.1), -135px -135px 0 186px rgba(0,117,237,0.1), -180px -180px 0 256px rgba(0,117,237,0);
  }
}
.xxyrounded1{
	position: relative;
	overflow: hidden;
	animation: xxyrounded1 1s;
}
/*.xxyrounded1:after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 1920px solid #fff;
	animation: xxyrounded1 1s;
	z-index: 99;
}
@keyframes xxyrounded1{
  0% {
	width: 0;height: 0;
  }
  100% {
    width: 100%;height: 100%;
  }
}*/
@keyframes xxyrounded1{
  0% {
	transform: scale(0,0);
  }
  20% {
	transform: scale(1.2,1.2);
  }
  40% {
	transform: scale(0.9,0.9);
  }
  60% {
	transform: scale(1.1,1.1);
  }
  80% {
	transform: scale(0.95,0.95);
  }
  100% {
    transform: scale(1,1);
  }
}
/* 特殊特效（切开） */
.cutin{
	position: relative;
	overflow: hidden;
}
.cutin:before{
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 99;
	transform: skewX(45deg) translateX(50%);
	animation: cutinb 1s;
}
.cutin:after{
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 99;
	transform: skewX(45deg) translateX(-50%);
	animation: cutina 1s;
}
@keyframes cutinb{
	0%{
		background-color: rgba(255, 255, 255, 1);
		left: 0;
		transform: t;
		opacity: 1;
	}
	100%{
		background-color: rgba(255, 255, 255, 0.8);
		left: 100px;
		top: 100px;
		opacity: 0;
	}
}

@keyframes cutina{
	0%{
		background-color: rgba(255, 255, 255, 1);
		left: 0;
		opacity: 1;
	}
	100%{
		background-color: rgba(255, 255, 255, 0.8);
		left: -100px;
		top: -100px;
		opacity: 0;
	}
}