/* 垂直水波动画 */
@keyframes gradient-rectangle 
{
    0%{-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: bottom;transform-origin: bottom;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 1;}
    100%{-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: top;transform-origin: top;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 0;}
}
@-webkit-keyframes gradient-rectangle  /*Safari Chrome*/
{
    0%{-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: bottom;transform-origin: bottom;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 1;}
    100%{-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: top;transform-origin: top;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 0;}
}
@-moz-keyframes gradient-rectangle  /* Firefox */
{
    0%{-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: bottom;transform-origin: bottom;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 1;}
    100%{-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: top;transform-origin: top;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 0;}
}
@-o-keyframes gradient-rectangle  /* Opera */
{
    0%{-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: bottom;transform-origin: bottom;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 1;}
    100%{-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transform-origin: top;transform-origin: top;background: linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));background: -webkit-linear-gradient(to top,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.6));opacity: 0;}
}

/* 缩小动画 */
@keyframes scale
{
    0%{-webkit-transform: scale(1.1); transform: scale(1.1);}
}
@-webkit-keyframes scale  /*Safari Chrome*/
{
    0%{-webkit-transform: scale(1.1); transform: scale(1.1);}
}
@-moz-keyframes scale  /* Firefox */
{
    0%{-webkit-transform: scale(1.1); transform: scale(1.1);}
}
@-o-keyframes scale  /* Opera */
{
    0%{-webkit-transform: scale(1.1); transform: scale(1.1);}
}

/* 左右扭动动画 */
@keyframes jello 
{
    0%,11.1%,100%{transform: none;}
    22.2%{transform: skewX(-12.5deg) skewY(-12.5deg);-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3%{transform: skewX(6.25deg) skewY(6.25deg);-webkit-transform: skewX(6.25deg) skewY(6.25deg);}
    44.4%{transform: skewX(-3.125deg) skewY(-3.125deg);-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5%{transform: skewX(1.5625deg) skewY(1.5625deg);-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6%{transform: skewX(-0.78125deg) skewY(-0.78125deg);-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7%{transform: skewX(0.390625deg) skewY(0.390625deg);-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8%{transform: skewX(-0.195312deg) skewY(-0.195312deg);-webkit-transform: skewX(-0.195312deg) skewY(-0.195312deg);}
}
@-webkit-keyframes jello  /*Safari Chrome*/
{
    0%,11.1%,100%{transform: none;}
    22.2%{transform: skewX(-12.5deg) skewY(-12.5deg);-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3%{transform: skewX(6.25deg) skewY(6.25deg);-webkit-transform: skewX(6.25deg) skewY(6.25deg);}
    44.4%{transform: skewX(-3.125deg) skewY(-3.125deg);-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5%{transform: skewX(1.5625deg) skewY(1.5625deg);-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6%{transform: skewX(-0.78125deg) skewY(-0.78125deg);-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7%{transform: skewX(0.390625deg) skewY(0.390625deg);-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8%{transform: skewX(-0.195312deg) skewY(-0.195312deg);-webkit-transform: skewX(-0.195312deg) skewY(-0.195312deg);}
}
@-moz-keyframes jello  /* Firefox */
{
    0%,11.1%,100%{transform: none;}
    22.2%{transform: skewX(-12.5deg) skewY(-12.5deg);-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3%{transform: skewX(6.25deg) skewY(6.25deg);-webkit-transform: skewX(6.25deg) skewY(6.25deg);}
    44.4%{transform: skewX(-3.125deg) skewY(-3.125deg);-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5%{transform: skewX(1.5625deg) skewY(1.5625deg);-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6%{transform: skewX(-0.78125deg) skewY(-0.78125deg);-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7%{transform: skewX(0.390625deg) skewY(0.390625deg);-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8%{transform: skewX(-0.195312deg) skewY(-0.195312deg);-webkit-transform: skewX(-0.195312deg) skewY(-0.195312deg);}
}
@-o-keyframes jello  /* Opera */
{
    0%,11.1%,100%{transform: none;}
    22.2%{transform: skewX(-12.5deg) skewY(-12.5deg);-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3%{transform: skewX(6.25deg) skewY(6.25deg);-webkit-transform: skewX(6.25deg) skewY(6.25deg);}
    44.4%{transform: skewX(-3.125deg) skewY(-3.125deg);-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5%{transform: skewX(1.5625deg) skewY(1.5625deg);-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6%{transform: skewX(-0.78125deg) skewY(-0.78125deg);-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7%{transform: skewX(0.390625deg) skewY(0.390625deg);-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8%{transform: skewX(-0.195312deg) skewY(-0.195312deg);-webkit-transform: skewX(-0.195312deg) skewY(-0.195312deg);}
}

/* 顺时针旋转动画 */
@keyframes nq 
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
}
@-moz-keyframes nq /* Firefox */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
}
@-webkit-keyframes nq /* Safari Chrome */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
}
@-o-keyframes nq /* Opera */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
}

/* 逆时针旋转动画 */
@keyframes wq
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);}
}
@-moz-keyframes wq /* Firefox */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);}
}
@-webkit-keyframes wq /* Safari Chrome */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);}
}
@-o-keyframes wq /* Opera */
{
    from{transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-ms-transform: rotate(0deg);}
    to{transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);}
}

/* 宽度增加100% */
@keyframes inwidth1
{
    0%{width: 0;}
    100%{width: 100%;}
}


@keyframes inwidth2
{
    0%{width: 100%;}
    100%{width: 0;}
}

@keyframes inheight1
{
    0%{height: 0;}
    100%{height: 100%;}
}


@keyframes inheight2
{
    0%{height: 100%;}
    100%{height: 0;}
}

/* 电话图标响铃动画 */
@keyframes bounce-up-data {
    10% {transform: rotate(20deg)}
    20% {transform: rotate(-10deg)}
    30% {transform: rotate(5deg)}
    40% {transform: rotate(-5deg)}
    50%,
    to {transform: rotate(0deg)}
}
@-moz-keyframes bounce-up-data {
    10% {transform: rotate(20deg)}
    20% {transform: rotate(-10deg)}
    30% {transform: rotate(5deg)}
    40% {transform: rotate(-5deg)}
    50%,
    to {transform: rotate(0deg)}
}
@-webkit-keyframes bounce-up-data {
    10% {transform: rotate(20deg)}
    20% {transform: rotate(-10deg)}
    30% {transform: rotate(5deg)}
    40% {transform: rotate(-5deg)}
    50%,
    to {transform: rotate(0deg)}
}
@-o-keyframes bounce-up-data {
    10% {transform: rotate(20deg)}
    20% {transform: rotate(-10deg)}
    30% {transform: rotate(5deg)}
    40% {transform: rotate(-5deg)}
    50%,
    to {transform: rotate(0deg)}
}

/* 上下移动 */
@keyframes moveupdown{0%{opacity: 0.5;transform: translate(0,0);}50%{opacity: 1;transform: translate(0,35px);}100%{opacity: 0.5;transform: translate(0,0);}}
@-moz-keyframes moveupdown{0%{opacity: 0.5;transform: translate(0,0);}50%{opacity: 1;transform: translate(0,35px);}100%{opacity: 0.5;transform: translate(0,0);}}
@-webkit-keyframes moveupdown{0%{opacity: 0.5;transform: translate(0,0);}50%{opacity: 1;transform: translate(0,35px);}100%{opacity: 0.5;transform: translate(0,0);}}
@-o-keyframes moveupdown{0%{opacity: 0.5;transform: translate(0,0);}50%{opacity: 1;transform: translate(0,35px);}100%{opacity: 0.5;transform: translate(0,0);}}