/*=========导航效果==============*/
/*按钮变化*/
/*out*/

@keyframes iconOut
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
@-moz-keyframes iconOut /* Firefox */
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
@-webkit-keyframes iconOut /* Safari 和 Chrome */
{
    0% {
        left: 0px;
        opacity: 1;
    }
    50%{
        left: 3px;
        opacity: 1;
    }
    100% {
        left: -20px;
        opacity: 0;
    }
}
/*IN*/

@keyframes iconIn
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@-moz-keyframes iconIn /* Firefox */
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
@-webkit-keyframes iconIn /* Safari 和 Chrome */
{
    0% {
        left: -20px;
        opacity: 0;
    }
    50%{
        left: 0px;
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}
/*out*/

@keyframes iconFirstOut
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(45deg);
        top: 5px;
    }
}
@-moz-keyframes iconFirstOut /* Firefox */
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(45deg);
        top: 5px;
    }
}
@-webkit-keyframes iconFirstOut /* Safari 和 Chrome */
{
    
    0% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
    100% {
        -webkit-transform: rotate(45deg);
        top: 5px;
    }
}
/**/
@keyframes iconLastOut
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(-45deg);
        top: -5px;
    }
}
@-moz-keyframes iconLastOut /* Firefox */
{
    0% {
        transform: rotate(0deg);
        top: 0px;
    }
    100% {
        transform: rotate(-45deg);
        top: -5px;
    }
}
@-webkit-keyframes iconLastOut /* Safari 和 Chrome */
{
    
    0% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
    100% {
        -webkit-transform: rotate(-45deg);
        top: -5px;
    }
}
/*IN*/

@keyframes iconFirstIn
{
    0% {
        transform: rotate(45deg);
        top: 5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-moz-keyframes iconFirstIn /* Firefox */
{
    0% {
        transform: rotate(45deg);
        top: 5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-webkit-keyframes iconFirstIn /* Safari 和 Chrome */
{
    
    0% {
        -webkit-transform: rotate(45deg);
        top: 5px;
    }
    100% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
}

@keyframes iconLastIn
{
    0% {
        transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-moz-keyframes iconLastIn /* Firefox */
{
    0% {
        transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        transform: rotate(0deg);
        top: 0px;
    }
}
@-webkit-keyframes iconLastIn /* Safari 和 Chrome */
{
    0% {
        -webkit-transform: rotate(-45deg);
        top: -5px;
    }
    100% {
        -webkit-transform: rotate(0deg);
        top: 0px;
    }
}
/*按钮变化结束*/
/*===========================*/
/*抖动效果*/
@keyframes Shake
{
  from   {
    transform: translateX(1px) rotate(2deg);
  }
  to  {transform: translateX(-1px) rotate(-2deg);}
}

@-moz-keyframes Shake /* Firefox */
{
  from{
    -moz-transform: translateX(1px) rotate(2deg);
  }
  to{
    -moz-transform: translateX(-1px) rotate(-2deg);
  }
}

@-webkit-keyframes Shake /* Safari 和 Chrome */
{
  from{
    -webkit-transform: translateX(1px) rotate(2deg);
  }
  to{
    -webkit-transform: translateX(-1px) rotate(-2deg);
  }
}
/*抖动效果结束*/
/*=================================*/
/*闪动效果*/

@keyframes flicker
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}

@-moz-keyframes flicker /* Firefox */
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}

@-webkit-keyframes flicker /* Safari 和 Chrome */
{
    from{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
    }
}
/**/

@keyframes flickerUp
{
    0%{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
        transform: perspective(100px) translate3d(0, 0, 0px);
        animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0.1);
        transform: perspective(100px) translate3d(0, 0, 10px);/*perspective透视距离*/
        animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
        transform: perspective(100px) translate3d(0, 0, 0px);
        animation-timing-function: ease-in;
    }
}

@-moz-keyframes flickerUp /* Firefox */
{
    0%{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
        transform: perspective(100px) translate3d(0, 0, 0px);
        animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0.1);
        transform: perspective(100px) translate3d(0, 0, 10px);
        animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
        transform: perspective(100px) translate3d(0, 0, 0px);
        animation-timing-function: ease-in;
    }
}

@-webkit-keyframes flickerUp /* Safari 和 Chrome */
{
    0%{
        box-shadow: 0 0 0 0px rgba(0,255,185,1);
        -webkit-transform: perspective(100px) translate3d(0, 0, 0px);
        -webkit-animation-timing-function: ease-out;
    }
    50%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0.1);
        -webkit-transform: perspective(100px) translate3d(0, 0, 10px);
        -webkit-animation-timing-function: ease-out;
    }
    100%{
        box-shadow: 0 0 0 10px rgba(0,255,185,0);
        -webkit-transform: perspective(100px) translate3d(0, 0, 0px);
        -webkit-animation-timing-function: ease-in;
    }
}
/*翻转*/

@keyframes flickerOut
{
    0%{
        transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(300px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
  }
    100%{
        transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@-moz-keyframes flickerOut /* Firefox */
{
    0%{
        transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }
    40%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }
    50%{
        transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(300px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in;
  }
    100%{
        transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
        animation-timing-function: ease-in;
    }
}

@-webkit-keyframes flickerOut /* Safari 和 Chrome */
{
    0%{
         -webkit-transform: perspective(300px) rotate3d(0, 1, 0, -360deg);
         -webkit-animation-timing-function: ease-out;
    }
    40%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
         -webkit-animation-timing-function: ease-out;
    }
    50%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
         -webkit-animation-timing-function: ease-in;
    }
    80% {
         -webkit-transform: perspective(300px) scale3d(.95, .95, .95);
         -webkit-animation-timing-function: ease-in;
    }
    100%{
         -webkit-transform: perspective(300px) translate3d(0, 0, 0px) rotate3d(0, 0, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
    }
}
/*闪动效果end*/
/*=================================*/
/**/
@keyframes twinkling
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}

@-moz-keyframes twinkling /* Firefox */
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}

@-webkit-keyframes twinkling /* Safari 和 Chrome */
{
    from{
        box-shadow: 0 0 0px rgba(0,255,185,1);
    }
    to{
        box-shadow: 0 0 5px rgba(0,255,185,1);
    }
}
/*斜线*/

@keyframes keytilt
{
    from{
        width: 0px;
    }
    to{
        width: 100%;
    }
}
@-moz-keyframes keytilt /* Firefox */
{
    from{
        width: 0px;
    }
    to{
        width:  100%;
    }
}
@-webkit-keyframes keytilt /* Safari 和 Chrome */
{
    from{
        width: 0px;
    }
    to{
        width:  100%;
    }
}
/**/
@keyframes keydialogue
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
@-moz-keyframes keydialogue /* Firefox */
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
@-webkit-keyframes keydialogue /* Safari 和 Chrome */
{
    from{
        opacity: 0;
        left: -10px;
    }
    to{
        opacity: 1;
        left: 0px;
    }
}
/**/


@keyframes fixedTop
{
    from{
        top: -90px;
    }
    to{
        top: 0px;
    }
}
@-moz-keyframes fixedTop /* Firefox */
{
    from{
        top: -90px;
    }
    to{
        top: 0px;
    }
}
@-webkit-keyframes fixedTop /* Safari 和 Chrome */
{
    from{
        top: -90px;
    }
    to{
        top: 0px;
    }
}
/**/