/**
@keyframes circle {}
@-o-keyframes circle {}
@-moz-keyframes circle {}
@-webkit-keyframes circle {}
**/
.circle {
  animation: circleX 2.4s cubic-bezier(0.36, 0, 0.64, 1) 1s   forwards, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s   forwards;
  -o-animation: circleX 2.4s cubic-bezier(0.36, 0, 0.64, 1) 1s   forwards, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s   forwards;
  -moz-animation: circleX 2.4s cubic-bezier(0.36, 0, 0.64, 1) 1s   forwards, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s   forwards;
  -webkit-animation: circleX 2.4s cubic-bezier(0.36, 0, 0.64, 1) 1s   forwards, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s   forwards;
}
/*画圆运动*/
@keyframes circleX {from{top: 100px; transform: rotate(45deg); opacity: .4; }  to {    top:755px; transform: rotate(0); opacity: 1; }}
@keyframes circleY {from{left: -800px;opacity: .4  }  to {    left: -242px;opacity: 1 }}

/*放大缩小1*/
@keyframes scale1 {  from {    transform: scale(0.5)  }  to {    transform: scale(1)  }}
@-o-keyframes scale1  {  from {    transform: scale(0.5)  }  to {    transform: scale(1)  }}
@-moz-keyframes scale1  {  from {    transform: scale(0.5)  }  to {    transform: scale(1)  }}
@-webkit-keyframes scale1  {  from {    transform: scale(0.5)  }  to {    transform: scale(1)  }}
/*放大缩小2*/
@keyframes scale2 {  from {    transform: scale(.7)  }  to {    transform: scale(1)  }}
@-o-keyframes scale2  {  from {    transform: scale(.7)  }  to {    transform: scale(1)  }}
@-moz-keyframes scale2  {  from {    transform: scale(.7)  }  to {    transform: scale(1)  }}
@-webkit-keyframes scale2  {  from {    transform: scale(.7)  }  to {    transform: scale(1)  }}
/*上下移动*/
@keyframes moveY1{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-o-keyframes moveY1{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-moz-keyframes moveY1{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-webkit-keyframes moveY1{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}

/*左右移动1*/
@keyframes moveX1{  0%{transform: translateX(-10px);}  100%{transform: translateX(0);}}
@-o-keyframes moveX1{  0%{transform: translateX(-10px);}  100%{transform: translateX(0);}}
@-moz-keyframes moveX1{  0%{transform: translateX(-10px);}  100%{transform: translateX(0);}}
@-webkit-keyframes moveX1{  0%{transform: translateX(-10px);}  100%{transform: translateX(0);}}

/*左右移动2----opcity*/
@keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-o-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-moz-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}
@-webkit-keyframes moveX2{  0%{transform: translateX(-10px);opacity: .4}  100%{transform: translateX(10px);opacity: 1}}

/*转圈1*/
@keyframes rotate1 {  from {    transform: rotate(0)  }  to {    transform: rotate(180deg)  }}
@-o-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(180deg)  }}
@-moz-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(180deg)  }}
@-webkit-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(180deg)  }}

/*转圈2*/
@keyframes rotate2 {  from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-o-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-moz-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}
@-webkit-keyframes rotate2  {   from {    transform: rotate(0)  }  to {    transform: rotate(-360deg)  }}


/*banner Ip 发光*/