@charset "utf-8";
/* CSS Document */

/*定义钟摆的动画round*/

/*定义变形动画round*/
@-webkit-keyframes 'skew' {
    0%,30%,80%{
        -webkit-transform: skew(10deg,10deg);
    }
    50%,15%,65%{
        -webkit-transform: skew(0deg,0deg);
    }
    to {
        -webkit-transform: skew(20deg,20deg);
    }
}

/*定义左边进入动画动画moveleft*/
@-webkit-keyframes 'moveleft' {
    from{
        -webkit-transform: translate(-400px,0);
    }
    50%{
        -webkit-transform: translate(0,0);
    }
    to {
        -webkit-transform: translate(0px,0);
    }
}

/*定义左边进入动画动画moveleft*/
@-webkit-keyframes 'moveleft2' {
    from{
        -webkit-transform: translate(-400px,0);
    }
    50%{
        -webkit-transform: translate(0,0);
    }
    to {
        -webkit-transform: translate(0px,0);
    }
}


/*定义右边进入动画动画moveright*/
@-webkit-keyframes 'moveright' {
    from{
        -webkit-transform: translate(600px,0);
    }
    50%{
        -webkit-transform: translate(0,0);
    }
    to {
        -webkit-transform: translate(0px,0);
    }
}
/*定义右边进入动画动画lrmove*/
@-webkit-keyframes lrmove /* Safari and Chrome */
{
    0%   {-webkit-transform: rotate(0deg);}
    25%  {-webkit-transform: rotate(10deg);}
    50%  {-webkit-transform: rotate(0deg);}
    75%  {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(0deg);}
}

/*定义右边进入动画动画lrmove2*/
@-webkit-keyframes lrmove2 /* Safari and Chrome */
{
    0%   {-webkit-transform: rotate(0deg);}
    25%  {-webkit-transform: rotate(5deg);}
    50%  {-webkit-transform: rotate(0deg);}
    75%  {-webkit-transform: rotate(-5deg);}
    100% {-webkit-transform: rotate(0deg);}
}




.skew{
    -webkit-animation-name: 'skew'; /*动画名称*/
    -webkit-animation-duration: 1s;/*播放一次所持续时间*/
    -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
    -webkit-animation-iteration-count: 1;/*动画播放次涒为无限次*/
}
.moveleft{
    -webkit-animation-name: 'moveleft'; /*动画名称*/
    -webkit-animation-duration: 2s;/*播放一次所持续时间*/
    -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
    -webkit-animation-iteration-count: 2;/*动画播放次涒为无限次*/
}
.moveleft2{
    -webkit-animation-name: 'moveleft2'; /*动画名称*/
    -webkit-animation-duration: 2s;/*播放一次所持续时间*/
    -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
    -webkit-animation-iteration-count: 1;/*动画播放次涒为无限次*/
}
.moveright{
    -webkit-animation-name: 'moveright'; /*动画名称*/
    -webkit-animation-duration: 2s;/*播放一次所持续时间*/
    -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
    /*-webkit-animation-delay:1s;*/
    -webkit-animation-iteration-count: 1;/*动画播放次涒为无限次*/
}

.lrmove{
     -webkit-animation-name: 'lrmove'; /*动画名称*/
     -webkit-animation-duration: 2s;/*播放一次所持续时间*/
     -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
     -webkit-animation-iteration-count:infinite;/*动画播放次涒为无限次*/
 }

.lrmove2{
    -webkit-animation-name: 'lrmove2'; /*动画名称*/
    -webkit-animation-duration: 3s;/*播放一次所持续时间*/
    -webkit-animation-timing-function: ease-in-out;/*动画播放频率*/
    -webkit-animation-iteration-count:infinite;/*动画播放次涒为无限次*/
}

.updown1 {
    -webkit-transform: translate 3d(0px, 6px, 0px);
    -webkit-animation: bounce-down 2s 0s infinite linear alternate both;
}

@-webkit-keyframes bounce-down {
    25% {
        -webkit-transform: translateY(-15px);
    }
    50%, 100% {
        -webkit-transform: translateY(-5px);
    }
    75% {
        -webkit-transform: translateY(-15px);
    }
}
.rat1 {
    -webkit-animation: lrmove3 2s 0s infinite  linear alternate both;
}
@-webkit-keyframes lrmove3 /* Safari and Chrome */
{
    0%   {-webkit-transform: rotate(0deg);}
    25%  {-webkit-transform: rotate(180deg);}
    50%  {-webkit-transform: rotate(360deg);}
    75%  {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(0deg);}
}


/*end*/