/**
@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;
  -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;}}
.a_ani::before{content:"";position:absolute;width:100%;height:200px;left:0;right:0;top:50%;background: rgba(248, 216, 115, .2);border-radius:50%;margin:-100px auto auto;animation:mytop 1s infinite;-webkit-animation:mytop 1s infinite;-webkit-transform:scale(0.2)}
@-webkit-keyframes mytop{0%{-webkit-transform:scale(0.2)}100%{-webkit-transform:scale(1)}}
@keyframes mytop{0%{transform:scale(0.2)}100%{transform:scale(1)}}

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


/*上下移动*/
@keyframes moveY1{  0%{transform: translateY(-5px);}  100%{transform: translateY(5px);}}
@-webkit-keyframes moveY1{  0%{transform: translateY(-5px);}  100%{transform: translateY(5px);}}
/*上下移动2----opcity*/
@keyframes moveY2{  0%{transform: translateY(0);} 100%{transform: translateY(10px);}}
@-webkit-keyframes moveY2{  0%{transform: translateY(0);} 100%{transform: translateY(10px);}}
/*上下移动3----opcity*/
@keyframes moveY3{  0%{transform: translateY(-10px);opacity: .4} 100%{transform: translateY(10px);opacity: 1}}
@-webkit-keyframes moveY3{  0%{transform: translateY(-10px);opacity: .4} 100%{transform: translateY(10px);opacity: 1}}
/*左右移动1*/
@keyframes moveX1{  0%{transform: translateX(-5px);}  100%{transform: translateX(5px);}}
@-webkit-keyframes moveX1{  0%{transform: translateX(-5px);} 100%{transform: translateX(5px);}}
/*左右移动2----opcity*/
@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}}
/*左右移动3----opcity*/
@keyframes moveX3{  0%{transform: translateX(-10px);opacity: 1} 100%{transform: translateX(10px);opacity: 0.4}}
@-webkit-keyframes moveX3{  0%{transform: translateX(-10px);opacity: 1} 100%{transform: translateX(10px);opacity: 0.4}}
/*转圈1*/
@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)  }}
@-webkit-keyframes rotate2 { from { transform: rotate(0)}to {transform: rotate(-360deg)}}
/*字体流光效果  配合 .text-streaming() 使用*/
@-webkit-keyframes word {0% {background-position: 0 0;} 100% {background-position: -100% 0}}
@keyframes word {0% {background-position: 0 0;} 100% {background-position: -100% 0}}
/*背景流动*/
@-webkit-keyframes bgliner1 {0%{background-position: 0% 50%;}100%{background-position: -400% 50%;}}
@keyframes bgliner1 {0%{background-position: 0% 50%;}100%{background-position: -400% 50%;}}
/*文字流动*/
@-webkit-keyframes bgliner2 { 0%{background-position: 0% 0%;}100%{background-position: -100% 0%;}}
@keyframes bgliner2 { 0%{background-position: 0% 0%;}100%{background-position: -100% 0%;}}

/*抖动渐显*/
@keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}
@-webkit-keyframes showing {
  0% {opacity: 0;transform: scale(.4) rotate(0)}
  15%{opacity: .15;transform: scale(.5) rotate(10deg)}
  36%{opacity: .36;transform: scale(.6) rotate(0)}
  50%{opacity: .5;transform: scale(.7) rotate(-10deg)}
  65%{opacity: .65;transform: scale(.8) rotate(0)}
  80%{opacity: .8;transform: scale(.9) rotate(10deg)}
  100% {opacity: 1;transform: scale(1) rotate(0)}
}

/*以顶部中间为中心，下摆左右抖动*/
@-webkit-keyframes shakeTopx{
  0%, 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0;transform-origin: 50% 0;}
  5% { -webkit-transform: rotate(2deg); transform: rotate(2deg);}
  10%,  20%,  30% {-webkit-transform: rotate(-4deg); transform: rotate(-4deg);}
  15%,  25%,  35% {-webkit-transform: rotate(4deg); transform: rotate(4deg);}
  40% {-webkit-transform: rotate(-2deg); transform: rotate(-2deg);}
  45% {-webkit-transform: rotate(2deg); transform: rotate(2deg);}
  50% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
}
@keyframes shakeTopx {
  0%, 100% {-webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 0;transform-origin: 50% 0;}
  5% { -webkit-transform: rotate(2deg); transform: rotate(2deg);}
  10%,  20%,  30% {-webkit-transform: rotate(-4deg); transform: rotate(-4deg);}
  15%,  25%,  35% {-webkit-transform: rotate(4deg); transform: rotate(4deg);}
  40% {-webkit-transform: rotate(-2deg); transform: rotate(-2deg);}
  45% {-webkit-transform: rotate(2deg); transform: rotate(2deg);}
  50% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
}