@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);
    }
}
/*定义右边进入动画动画left-right-move*/
@-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);}
}



.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;/*动画播放次涒为无限次*/
}

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

@-webkit-keyframes bounce-down {
    0% {
        -webkit-transform: translateY(0px);
    }
    25% {
        -webkit-transform: translateY(-10px);
    }
    50%, 100% {
        -webkit-transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(5px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}

.lr1 {position:relative;
    -webkit-transform: translate 3d(0px, 6px, 0px);
    -webkit-animation: le-ri 3.5s 0s infinite linear alternate both;
}

@-webkit-keyframes le-ri /* Safari and Chrome */
{
    0%   {left:0px; top:60px;}
    25%  {left:-80px; top:60px;}
    50%  {left:5px; top:60px;}
    75%  { left:80px; top:60px;}
    100% { left:0px; top:60px;}
}

/*end*/