/*球球飘动*/

.move{
    -webkit-animation: movement 3s linear normal both infinite;
    -o-animation: movement 3s linear normal both infinite;
    animation: movement 3s linear normal both infinite;
}
.move1{
    -webkit-animation: movement1 3s linear normal both infinite;
    -o-animation: movement1 3s linear normal both infinite;
    animation: movement1 3s linear normal both infinite;
}
.move2{
    -webkit-animation: movement2 3s linear normal both infinite;
    -o-animation: movement2 3s linear normal both infinite;
    animation: movement2 3s linear normal both infinite;
}
.move3{
    -webkit-animation: movement3 3s linear normal both infinite;
    -o-animation: movement3 3s linear normal both infinite;
    animation: movement3 3s linear normal both infinite;
}

@keyframes movement {
    0% {  -webkit-transform: translate(0px,-3px);  transform: translate(0px,-3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(6px,10px);  transform: translate(6px,10px);  }
    75% { -webkit-transform: translate(8px,0px);  transform: translate(8px,0px);  }
    100% {  -webkit-transform: translate(0px,-3px);  transform: translate(0px,-3px);  }
}
@-webkit-keyframes movement {
    0% {  -webkit-transform: translate(0px,-3px);  transform: translate(0px,-3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(6px,10px);  transform: translate(6px,10px);  }
    75% {  -webkit-transform: translate(8px,0px);  transform: translate(8px,0px);  }
    100% {  -webkit-transform: translate(0px,-3px);  transform: translate(0px,-3px);  }
}
@keyframes movement1 {
    0% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(-6px,-10px);  transform: translate(-6px,-10px);  }
    75% {  -webkit-transform: translate(8px,0px);  transform: translate(8px,0px);  }
    100% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
}
@-webkit-keyframes movement1 {
    0% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(-6px,-10px);  transform: translate(-6px,-10px);  }
    75% {  -webkit-transform: translate(8px,0px);  transform: translate(8px,0px);  }
    100% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
}
@keyframes movement2 {
    0% {  -webkit-transform: translate(10px,3px);  transform: translate(10px,3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
    75% {  -webkit-transform: translate(-8px,0px);  transform: translate(-8px,0px);  }
    100% {  -webkit-transform: translate(10px,3px);  transform: translate(10px,3px);  }
}
@-webkit-keyframes movement2 {
    0% {  -webkit-transform: translate(10px,3px);  transform: translate(10px,3px);  }
    25% {  -webkit-transform: translate(3px,6px);  transform: translate(3px,6px);  }
    50% {  -webkit-transform: translate(6px,-3px);  transform: translate(6px,-3px);  }
    75% {  -webkit-transform: translate(-8px,0px);  transform: translate(-8px,0px);  }
    100% {  -webkit-transform: translate(10px,3px);  transform: translate(10px,3px);  }
}

@keyframes movement3 {
    0% {  -webkit-transform: translate(-10px,3px);  transform: translate(-10px,3px);  }
    25% {  -webkit-transform: translate(-4px,6px);  transform: translate(-4px,6px);  }
    50% {  -webkit-transform: translate(2px,8px);  transform: translate(2px,8px);  }
    75% {  -webkit-transform: translate(-8px,0px);  transform: translate(-8px,0px);  }
    100% {  -webkit-transform: translate(-10px,3px);  transform: translate(-10px,3px);  }
}
@-webkit-keyframes movement3 {
    0% {  -webkit-transform: translate(-10px,3px);  transform: translate(-10px,3px);  }
    25% {  -webkit-transform: translate(-4px,6px);  transform: translate(-4px,6px);  }
    50% {  -webkit-transform: translate(2px,8px);  transform: translate(2px,8px);  }
    75% {  -webkit-transform: translate(-8px,0px);  transform: translate(-8px,0px);  }
    100% {  -webkit-transform: translate(-10px,3px);  transform: translate(-10px,3px);  }
}


/*从上下左右进入*/
.bounceinR{
    -webkit-animation: bounceinR 2s ease-out backwards ;
    -o-animation: bounceinR 2s ease-out backwards;
    animation: bounceinR 2s ease-out backwards;
}
.bounceinL{
    -webkit-animation: bounceinL 2s ease-out backwards ;
    -o-animation: bounceinL 2s ease-out backwards;
    animation: bounceinL 2s ease-out backwards;
}
@keyframes  bounceinR{
    0%{  opacity: 0;  transform: translateX(100%);  }
    100%{  opacity: 1;  transform: translateX(0);  }
}
@-webkit-keyframes  bounceinR{
    0%{  opacity: 0;  -webkit-transform: translateX(100%);  }
    100%{  opacity: 1;  -webkit-transform: translateX(0);  }
}
@keyframes  bounceinL{
    0%{  opacity: 0;  transform: translateX(-100%);  }
    100%{  opacity: 1;  transform: translateX(0);  }
}
@-webkit-keyframes  bounceinL{
    0%{  -webkit-transform: translateX(-100%);  }
    100%{  -webkit-transform: translateX(0);  }
}

/*上下跳动*/
.jump{
    -webkit-animation: jump 2s linear normal both infinite;
    -o-animation: jump 2s linear normal both infinite;
    animation: jump 2s linear normal both infinite;
    transform-origin: 50% 0 ;
}
.jump1{
    -webkit-animation: jump1 2s linear normal both infinite;
    -o-animation: jump1 2s linear normal both infinite;
    animation: jump1 2s linear normal both infinite;
    transform-origin: 50% 0 ;
}

.jump2{
    -webkit-animation: jump2 2s linear normal both infinite;
    -o-animation: jump2 2s linear normal both infinite;
    animation: jump2 2s linear normal both infinite;
    transform-origin: 50% 0 ;
}
.jump3{
    -webkit-animation: jump3 2s linear normal both infinite;
    -o-animation: jump3 2s linear normal both infinite;
    animation: jump3 2s linear normal both infinite;
    transform-origin: 50% 0 ;
}
@keyframes  jump{
    0%{  transform: translateY(0);  }
    50%{  transform: translateY(10px);  }
    100%{  transform: translateY(0);  }
}
@-webkit-keyframes  jump{
    0%{  -webkit-transform: translateY(0);  }
    50%{  -webkit-transform: translateY(10px);  }
    100%{  -webkit-transform: translateY(0);  }
}

@keyframes  jump1{
    0%{  transform: translateY(0);  }
    50%{  transform: translateY(-10px);  }
    100%{  transform: translateY(0);  }
}
@-webkit-keyframes  jump1{
    0%{  -webkit-transform: translateY(0);  }
    50%{  -webkit-transform: translateY(-10px);  }
    100%{  -webkit-transform: translateY(0);  }
}

@keyframes  jump2{
    0%{  transform: translateY(0);  }
    50%{  transform: translateY(-5px);  }
    100%{  transform: translateY(0);  }
}
@-webkit-keyframes  jump2{
    0%{  -webkit-transform: translateY(0);  }
    50%{  -webkit-transform: translateY(-5px);  }
    100%{  -webkit-transform: translateY(0);  }
}
@keyframes  jump3{
    0%{  transform: translateY(0);  }
    50%{  transform: translateY(5px);  }
    100%{  transform: translateY(0);  }
}
@-webkit-keyframes  jump3{
    0%{  -webkit-transform: translateY(0);  }
    50%{  -webkit-transform: translateY(5px);  }
    100%{  -webkit-transform: translateY(0);  }
}

.swing{
    -webkit-animation: swing 2s linear normal both infinite;
    -o-animation: swing 2s linear normal both infinite;
    animation: swing 2s linear normal both infinite;
    transform-origin: 50% 0 ;
}

/*摆钟*/
@keyframes  swing{
    0%{  transform: rotate(5deg);  }
    50%{  transform: rotate(-5deg);  }
    100%{  transform: rotate(5deg);  }
}
@-webkit-keyframes  swing{
     0%{  -webkit-transform: rotate(5deg);  }
     50%{  -webkit-transform: rotate(-5deg);  }
     100%{  -webkit-transform: rotate(5deg);  }
 }

@keyframes  roSwing{
    0%{  transform: rotate(10deg);  }
    50%{  transform: rotate(-10deg);  }
    100%{  transform: rotate(10deg);  }
}
@-webkit-keyframes  roSwing{
    0%{  -webkit-transform: rotate(10deg);  }
    50%{  -webkit-transform: rotate(-10deg);  }
    100%{  -webkit-transform: rotate(10deg);  }
}


/*旋转进入*/
.rotateinRT{
    -webkit-animation:rotateinRT 3s ease-out backwards;
    -moz-animation:rotateinRT 3s ease-out backwards;
    -ms-animation: rotateinRT 3s ease-out backwards;
    animation:rotateinRT 3s ease-out backwards;
}
.rotateinLT{
    -webkit-animation:rotateinLT 2s ease-out backwards;
    -moz-animation:rotateinLT 2s ease-out backwards;
    -ms-animation: rotateinLT 2s ease-out backwards;
    animation:rotateinLT 2s ease-out backwards;
}
.animDelay1s{
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.animDelay2s{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.animDelay3s{
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}
.animDelay4s{
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

@keyframes rotateinRT {
    0%{  transform-origin: right bottom;  transform: rotate(90deg);  opacity: 0;  }
    100%{  transform-origin: right bottom;  transform: rotate(0);  opacity: 1;  }
}
@-webkit-keyframes  rotateinRT {
    0%{  -webkit-transform-origin: right bottom;  -webkit-transform: rotate(90deg);  opacity: 0;  }
    100%{  -webkit-transform-origin: right bottom;  -webkit-transform: rotate(0);  opacity: 1;  }
}
@keyframes rotateinLT {
    0%{  transform-origin: left top;  transform: rotate(-90deg);  opacity: 0;  }
    100%{  transform-origin: left top;  transform: rotate(0);  opacity: 1;  }
}
@-webkit-keyframes  rotateinLT {
    0%{  -webkit-transform-origin: left top;  -webkit-transform: rotate(-90deg);  opacity: 0;  }
    100%{  -webkit-transform-origin: left top;  -webkit-transform: rotate(0);  opacity: 1;  }
}

/*缩放*/
.scale{
    -webkit-animation: scale 2s linear normal both infinite;
    -o-animation: scale 2s linear normal both infinite;
    animation: scale 2s linear normal both infinite;
}
@keyframes scale {
    0%{transform: scale(0.8)}
    50%{transform: scale(1.1)}
    100%{transform: scale(0.8)}
}

.shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-animation: shadow1 3s linear normal both infinite;
    -o-animation: shadow1 3s linear normal both infinite;
    animation: shadow1 3s linear normal both infinite;
}


/*.shadow:before {*/
    /*pointer-events: none;*/
    /*position: absolute;*/
    /*z-index: -1;*/
    /*content: '';*/
    /*top: 100%;*/
    /*left: 5%;*/
    /*height: 10px;*/
    /*width: 90%;*/
    /*opacity: 0;*/
    /*background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);*/
    /*background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);*/
    /*-webkit-transition-duration: 0.3s;*/
    /*transition-duration: 0.3s;*/
    /*-webkit-transition-property: transform, opacity;*/
    /*transition-property: transform, opacity;*/
    /*-webkit-animation: shadow 3s linear normal both infinite;*/
    /*-o-animation: shadow 3s linear normal both infinite;*/
    /*animation: shadow 3s linear normal both infinite;*/
/*}*/
@keyframes shadow {
    0%{
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        opacity: 1;
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    0%{
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes shadow {
    0%{
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        opacity: 1;
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    0%{
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes shadow1 {
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes shadow1 {
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}