/* 下划线 */
@-webkit-keyframes underline{
    0%{opacity:0;width: 0%;-webkit-transform:translate3d(0,2px,0);transform:translate3d(0,2px,0)}
    to{opacity:1;width: 30%;-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@keyframes underline{
    0%{opacity:0;width: 0%;-webkit-transform:translate3d(0,2px,0);transform:translate3d(0,2px,0)}
    to{opacity:1;width: 30%;-webkit-transform:translateZ(0);transform:translateZ(0)}
}

/* 首页 btn-hover */
@-webkit-keyframes criss-cross-left {
    0% {left: -20px}
    50% {left: 50%;width: 20px;height: 20px}
    100% {left: 50%;width: 300px;height: 300px}
}
@keyframes criss-cross-left {
    0% {left: -20px}
    50% {left: 50%;width: 20px;height: 20px}
    100% {left: 50%;width: 300px;height: 300px}
}
@-webkit-keyframes criss-cross-right {
    0% {right: -20px}
    50% {right: 50%;width: 20px;height: 20px}
    100% {right: 50%;width: 300px;height: 300px}
}
@keyframes criss-cross-right {
    0% {right: -20px}
    50% {right: 50%;width: 20px;height: 20px}
    100% {right: 50%;width: 300px;height: 300px}
}

/* 漂浮动画 */
@-webkit-keyframes float {
    0% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0)}
    100% {-webkit-transform: translate3d(0,2px,0);transform: translate3d(0,2px,0)}
}
@keyframes float {
    0% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0)}
    100% {-webkit-transform: translate3d(0,2px,0);transform: translate3d(0,2px,0)}
}
.animate-float{-webkit-animation: float 1.4s ease-in-out infinite alternate both;animation: float 1.4s ease-in-out infinite alternate both}

/* 手机漂浮动画 */
@-webkit-keyframes float-phone {
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0)}
    100% {-webkit-transform: translate3d(0,6px,0);transform: translate3d(0,6px,0)}
}
@keyframes float-phone {
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0)}
    100% {-webkit-transform: translate3d(0,6px,0);transform: translate3d(0,6px,0)}
}


/* 手机动画-left */
@-webkit-keyframes phone-left {
    0% {-webkit-transform: translate3d(20%,60%,0);transform: translate3d(20%,60%,0);opacity: 0}
    100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1}
}
@keyframes phone-left {
    0% {-webkit-transform: translate3d(20%,60%,0);transform: translate3d(20%,60%,0);opacity: 0}
    100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1}
}
/* 手机动画-right */
@-webkit-keyframes phone-right {
    0% {-webkit-transform: translate3d(20%,-60%,0);transform: translate3d(20%,-60%,0);opacity: 0}
    100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1}
}
@keyframes phone-right {
    0% {-webkit-transform: translate3d(20%,-60%,0);transform: translate3d(20%,-60%,0);opacity: 0}
    100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1}
}

/* 首页标题动画 */
@-webkit-keyframes reveal {
    80% {letter-spacing: 2px}
    100% {background-size: 300% 300%}
}
@keyframes reveal {
    80% {letter-spacing: 2px}
    100% {background-size: 300% 300%}
}
@-webkit-keyframes glow {
    0% {letter-spacing: 2px}
    40% {text-shadow: 0 0 10px rgba(43, 146, 213, 0.7)}
    100% {letter-spacing: 2px}
}
@keyframes glow {
    0% {letter-spacing: 2px}
    40% {text-shadow: 0 0 10px rgba(43, 146, 213, 0.7)}
    100% {letter-spacing: 2px}
}

/* 文字-高光 */
@-webkit-keyframes highlight {
    0% {-webkit-transform:skewX(-25deg) translate3d(-150%,0,0);transform:skewX(-25deg) translate3d(-150%,0,0)}
    100% {-webkit-transform:skewX(-25deg) translate3d(100%,0,0);transform:skewX(-25deg) translate3d(150%,0,0)}
}
@keyframes highlight {
    0% {-webkit-transform:skewX(-25deg) translate3d(-150%,0,0);transform:skewX(-25deg) translate3d(-150%,0,0)}
    100% {-webkit-transform:skewX(-25deg) translate3d(150%,0,0);transform:skewX(-25deg) translate3d(150%,0,0)}
}
.highlight,
.animate-highlight{
    overflow: hidden;
}
.highlight:after,
.animate-highlight:after{
    content:'';
    position:absolute;
    z-index: 1;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    -webkit-transform:skewX(-25deg) translate3d(-150%,0,0);
    transform:skewX(-25deg) translate3d(-150%,0,0);
    background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
    background-image:linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 35%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
}
.animate-highlight:after{
    -webkit-animation: highlight 4s infinite both 1s;
    animation: highlight 4s infinite both 1s;
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/* 淡入 */
@-webkit-keyframes fadeIn {
    0% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeIn {
    0% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@-webkit-keyframes fadeInUp {
    0% {-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeInUp {
    0% {-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@-webkit-keyframes fadeInUp-20 {
    0% {-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeInUp-20 {
    0% {-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@-webkit-keyframes fadeInDown {
    0% {-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeInDown {
    0% {-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@-webkit-keyframes fadeInLeft {
    0% {-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeInLeft {
    0% {-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@-webkit-keyframes fadeInRight {
    0% {-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
@keyframes fadeInRight {
    0% {-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
}
/* 倾斜划入 */
@-webkit-keyframes lightSpeedIn-left{
    0%{-webkit-transform:translate3d(-50%,0,0) skewX(20deg);transform:translate3d(-50%,0,0) skewX(20deg);opacity:0}
    60%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg);opacity:1}
    80%{-webkit-transform:skewX(3deg);transform:skewX(3deg);opacity:1}
    100%{-webkit-transform:none;transform:none;opacity:1}
}
@keyframes lightSpeedIn-left{
    0%{-webkit-transform:translate3d(-50%,0,0) skewX(20deg);transform:translate3d(-50%,0,0) skewX(20deg);opacity:0}
    60%{-webkit-transform:skewX(-15deg);transform:skewX(-15deg);opacity:1}
    80%{-webkit-transform:skewX(3deg);transform:skewX(3deg);opacity:1}
    100%{-webkit-transform:none;transform:none;opacity:1}
}
@-webkit-keyframes lightSpeedIn-right{
    0%{-webkit-transform:translate3d(50%,0,0) skewX(-20deg);transform:translate3d(50%,0,0) skewX(-20deg);opacity:0}
    60%{-webkit-transform:skewX(15deg);transform:skewX(15deg);opacity:1}
    80%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg);opacity:1}
    100%{-webkit-transform:none;transform:none;opacity:1}
}
@keyframes lightSpeedIn-right{
    0%{-webkit-transform:translate3d(50%,0,0) skewX(-20deg);transform:translate3d(50%,0,0) skewX(-20deg);opacity:0}
    60%{-webkit-transform:skewX(15deg);transform:skewX(15deg);opacity:1}
    80%{-webkit-transform:skewX(-3deg);transform:skewX(-3deg);opacity:1}
    100%{-webkit-transform:none;transform:none;opacity:1}
}

/* 放大缩小 */
@-webkit-keyframes scale{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    100%{-webkit-transform:scale(0.75);transform:scale(0.75)}
}
@keyframes scale{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    100%{-webkit-transform:scale(0.75);transform:scale(0.75)}
}
/* 逐渐放大逐渐显现 */
@-webkit-keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}@keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}
/* 逐渐左显 */
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
/* 逐渐右显 */
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
/* 呼吸 */
@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}