/**
@keyframes circle {}
@-o-keyframes circle {}
@-moz-keyframes circle {}
@-webkit-keyframes circle {}
**/
.circle {
  animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -o-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -moz-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  -webkit-animation: circleX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, circleY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
/*画圆运动*/
@keyframes circleX {  from {    top: -60px;  }  to {    top: -40px;  }}
@keyframes circleY {  from {    right: -150px;  }  to {    right: -120px;  }}

/*放大缩小1*/
@keyframes scale1 {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-o-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-moz-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
@-webkit-keyframes scale1  {  from {    transform: scale(0.9)  }  to {    transform: scale(1.1)  }}
/*放大缩小2*/
@keyframes scale2 {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-o-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-moz-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}
@-webkit-keyframes scale2  {  from {    transform: scale(1)  }  to {    transform: scale(1.05)  }}

@keyframes scal3 {  from {    transform: scale(.9)  }  to {    transform: scale(1.01)  }}
@-o-keyframes scale3  {  from {    transform: scale(.9)  }  to {    transform: scale(1.01)  }}
@-moz-keyframes scale3  {  from {    transform: scale(.9)  }  to {    transform: scale(1.01)  }}
@-webkit-keyframes scale3  {  from {    transform: scale(.9)  }  to {    transform: scale(1.01)  }}
/*上下移动*/
@keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-o-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-moz-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}
@-webkit-keyframes moveY{  0%{transform: translateY(-10px);}  100%{transform: translateY(0);}}

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

/*左右移动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(360deg)  }}
@-o-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-moz-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}
@-webkit-keyframes rotate1  {   from {    transform: rotate(0)  }  to {    transform: rotate(360deg)  }}

/*转圈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)  }}