/* 由大变小缩放效果 */
@-webkit-keyframes backgroundZoom {
    0% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes backgroundZoom {
    0% {
        -moz-transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1);
    }
}
@-o-keyframes backgroundZoom {
    0% {
        -o-transform: scale(1.2);
    }
    100% {
        -o-transform: scale(1);
    }
}
@-ms-keyframes backgroundZoom {
	0% {
        -ms-transform: scale(1.2);
    }
    100% {
        -ms-transform: scale(1);
    }
}
@keyframes backgroundZoom {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/*宽度变化*/
@-webkit-keyframes widthChange {
    0% {
        width:0;
    }
    100% {
        width:;
    }
}
@-moz-keyframes widthChange {
    0% {
        width:0;
    }
    100% {
        width:;
    }
}
@-o-keyframes widthChange {
    0% {
        width:0;
    }
    100% {
        width:;
    }
}
@-ms-keyframes widthChange {
    0% {
        width:0;
    }
    100% {
        width:;
    }
}
@keyframes widthChange {
    0% {
        width:0;
    }
    100% {
        width:;
    }
}
/*高度变化*/
@-webkit-keyframes heightScale {
    0% {
        height:0;
    }
    100% {
        height:;
    }
}
@-moz-keyframes heightScale {
    0% {
        height:0;
    }
    100% {
        height:;
    }
}
@-o-keyframes heightScale {
    0% {
        height:0;
    }
    100% {
        height:;
    }
}
@-ms-keyframes heightScale {
    0% {
        height:0;
    }
    100% {
        height:;
    }
}
@keyframes heightScale {
    0% {
        height:0;
    }
    100% {
        height:;
    }
}
/* 向上浮现动画 */
@-webkit-keyframes slideUp {
    0% {
        opacity:0;
        -webkit-transform:translateY(50px);
    }
    100% {
        opacity:1;
        -webkit-transform:translateY(0%);
    }
}
@-moz-keyframes slideUp {
    0% {
        opacity:0;
        -moz-transform:translateY(50px);
    }
    100% {
        opacity:1;
        -moz-transform:translateY(0%);
    }
}
@-o-keyframes slideUp {
    0% {
        opacity:0;
        -o-transform:translateY(50px);
    }
    100% {
        opacity:1;
        -o-transform:translateY(0%);
    }
}
@-ms-keyframes slideUp {
   0% {
        opacity:0;
        -ms-transform:translateY(50px);
    }
    100% {
        opacity:1;
        -ms-transform:translateY(0%);
    }
}
@keyframes slideUp {
    0% {
        opacity:0;
        transform:translateY(50px);
    }
    100% {
        opacity:1;
        transform:translateY(0%);
    }
}
/* opacity变化 */
@-moz-keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-ms-keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* 宽度变化 */
@-moz-keyframes scaleWidth {
    0% {
        width: 0;
    }
    100% {
        width: 45px;
    }
}
@-webkit-keyframes scaleWidth {
    0% {
        width: 0;
    }
    100% {
        width: 45px;
    }
}
@-o-keyframes scaleWidth {
    0% {
        width: 0;
    }
    100% {
        width: 45px;
    }
}
@-ms-keyframes scaleWidth {
    0% {
        width: 0;
    }
    100% {
        width: 45px;
    }
}
@keyframes scaleWidth {
    0% {
        width: 0;
    }
    100% {
        width: 45px;
    }
}
/* div高度变化 */
@-moz-keyframes scaleHeight {
    0% {
        -moz-transform: scale(1);
        height: 360px;
        opacity: 1;
        top: 20px;
    }
    100% {
        -moz-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-webkit-keyframes scaleHeight {
    0% {
        -webkit-transform: scale(1);
        height: 360px;
        opacity: 1;
        top: 20px;
    }
    100% {
        -webkit-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-o-keyframes scaleHeight {
    0% {
        -o-transform: scale(1);
        height: 360px;
        opacity: 1;
        top: 20px;
    }
    100% {
        -o-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-ms-keyframes scaleHeight {
    0% {
        -ms-transform: scale(1);
        height: 360px;
        opacity: 1;
        top: 20px;
    }
    100% {
        -ms-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@keyframes scaleHeight {
    0% {
        transform: scale(1);
        height: 360px;
        opacity: 1;
        top: 20px;
    }
    100% {
        transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
/* icon字体大小变化 */
@keyframes scaleFontSize {
    0% {
        transform: scale(1);
        font-size: 10px;
        opacity: 1;
        margin-bottom: 0px;
    }
    100% {
        transform: scale(1);
        font-size: 35px;
        opacity: 1;
        margin-bottom: 15px;
    }
}
@-moz-keyframes scaleFontSize {
    0% {
        -moz-transform: scale(1);
        font-size: 10px;
        opacity: 1;
        margin-bottom: 0px;
    }
    100% {
        -moz-transform: scale(1);
        font-size: 35px;
        opacity: 1;
        margin-bottom: 15px;
    }
}
@-webkit-keyframes scaleFontSize {
    0% {
        -webkit-transform: scale(1);
        font-size: 10px;
        opacity: 1;
        margin-bottom: 0px;
    }
    100% {
        -webkit-transform: scale(1);
        font-size: 35px;
        opacity: 1;
        margin-bottom: 15px;
    }
}
@-o-keyframes scaleFontSize {
    0% {
        -o-transform: scale(1);
        font-size: 10px;
        opacity: 1;
        margin-bottom: 0px;
    }
    100% {
        -o-transform: scale(1);
        font-size: 35px;
        opacity: 1;
        margin-bottom: 15px;
    }
}
@-ms-keyframes scaleFontSize {
    0% {
        -ms-transform: scale(1);
        font-size: 10px;
        opacity: 1;
        margin-bottom: 0px;
    }
    100% {
        -ms-transform: scale(1);
        font-size: 35px;
        opacity: 1;
        margin-bottom: 15px;
    }
}
/* 从小变大变化 */
@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes scale {
    0% {
        -moz-transform: scale(0);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1);
        opacity: 1;
    }
}
@-o-keyframes scale {
    0% {
        -o-transform: scale(0);
        opacity: 1;
    }
    100% {
        -o-transform: scale(1);
        opacity: 1;
    }
}
@-ms-keyframes scale {
    0% {
        -ms-transform: scale(0);
        opacity: 1;
    }
    100% {
        -ms-transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scaleBig {
    0% {
        /*transform: scale(0);*/
        font-size: 0;
        /*opacity: 1;*/
    }
    100% {
        /*transform: scale(1);*/
        font-size: ;
        /*opacity: 1;*/
    }
}
/* 由大变小 */
@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes zoom {
    0% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
        opacity: 1;
    }
}
@-o-keyframes zoom {
    0% {
        -o-transform: scale(1.3);
    }
    100% {
        -o-transform: scale(1);
        opacity: 1;
    }
}
@-ms-keyframes zoom {
    0% {
        -ms-transform: scale(1.3);
    }
    100% {
        -ms-transform: scale(1);
        opacity: 1;
    }
}
@keyframes zoom {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/*宽度变化*/
@-webkit-keyframes widthScale {
    0% {
        width:160px;
        left: 0;
    }
    100% {
        width:240px;
        left: -180px;
    }
}
@-moz-keyframes widthScale {
    0% {
        width:160px;
        left: 0;
    }
    100% {
        width:240px;
        left: -180px;
    }
}
@-o-keyframes widthScale {
    0% {
        width:160px;
        left: 0;
    }
    100% {
        width:240px;
        left: -180px;
    }
}
@-ms-keyframes widthScale {
    0% {
        width:160px;
        left: 0;
    }
    100% {
        width:240px;
        left: -180px;
    }
}
@keyframes widthScale {
    0% {
        width:160px;
        left: 0;
    }
    100% {
        width:240px;
        left: -180px;
    }
}
/* 从小变大变化 */
@keyframes customerFrame {
    0%   {transform:scale(0,0);opacity:0;}
    100% {transform:scale(1,1);opacity:1}
}

@-moz-keyframes customerFrame /* Firefox */
{
    0%   {transform:scale(0,0);opacity:0}
    100% {transform:scale(1,1);opacity:1}   
}

@-webkit-keyframes customerFrame /* Safari 和 Chrome */
{
    0%   {transform:scale(0,0);opacity:0}
    100% {transform:scale(1,1);opacity:1}   
}

@-o-keyframes customerFrame /* Opera */
{
    0%   {transform:scale(0,0);opacity:0}
    100% {transform:scale(1,1);opacity:1}   
}

/* 由大变小缩放效果 */
@-webkit-keyframes backgroundScale {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.2);
    }
}
@-moz-keyframes backgroundScale {
    0% {
        -moz-transform: scale(1);
    }
    100% {
        -moz-transform: scale(1.2);
    }
}
@-o-keyframes backgroundScale {
    0% {
        -o-transform: scale(1);
    }
    100% {
        -o-transform: scale(1.2);
    }
}
@-ms-keyframes backgroundScale {
    0% {
        -ms-transform: scale(1);
    }
    100% {
        -ms-transform: scale(1.2);
    }
}
@keyframes backgroundScale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
/* 背景颜色变化 */
@-webkit-keyframes backgroundColor {
    0% {
        background: rgba(255,255,255,.1);
    }
    100% {
        background: rgba(255,255,255,1);
    }
}
@-moz-keyframes backgroundColor {
    0% {
        background: rgba(255,255,255,.1);
    }
    100% {
        background: rgba(255,255,255,1);
    }
}
@-o-keyframes backgroundColor {
    0% {
        background: rgba(255,255,255,.1);
    }
    100% {
        background: rgba(255,255,255,1);
    }
}
@-ms-keyframes backgroundColor {
    0% {
        background: rgba(255,255,255,.1);
    }
    100% {
        background: rgba(255,255,255,1);
    }
}
@keyframes backgroundColor {
    0% {
        background: rgba(255,255,255,.1);
    }
    100% {
        background: rgba(255,255,255,1);
    }
}
旋转
@-webkit-keyframes bgRotate {
    0% {
        -webkit-transform: rotate(-45deg);
    }
}
@-o-keyframes bgRotate {
    0% {
        -o-transform: rotate(-45deg);
    }
}
@-ms-keyframes bgRotate {
    0% {
        -ms-transform: rotate(-45deg);
    }
}
@-moz-keyframes bgRotate {
    0% {
        -moz-transform: rotate(-45deg);
    }
}
@keyframes bgRotate {
    0% {
        transform: rotate(-45deg);
    }
}

@keyframes ad2Frame
{
0%   {background:#383838;}
100% {background:;}  
}
@-ms-keyframes ad2Frame /* Firefox */
{
0%   {background:#383838;}
100% {background:;}  
}
@-moz-keyframes ad2Frame /* Firefox */
{
0%   {background:#383838;}
100% {background:;}  
}

@-webkit-keyframes ad2Frame /* Safari 和 Chrome */
{
0%   {background:#383838;}
100% {background:;}  
}

@-o-keyframes ad2Frame /* Opera */
{
0%   {background:#383838;}
100% {background:;}   
}

@keyframes ad2FrameLoaded
{
0%   {transform:scale(0,0);opacity:0}
100% {transform:scale(1,1);opacity:1}   
}

@-moz-keyframes ad2FrameLoaded /* Firefox */
{
0%   {-moz-transform:scale(0,0);opacity:0}
100% {-moz-transform:scale(1,1);opacity:1}   
}
@-ms-keyframes ad2FrameLoaded /* ie */
{
0%   {-ms-transform:scale(0,0);opacity:0}
100% {-ms-transform:scale(1,1);opacity:1}   
}
@-webkit-keyframes ad2FrameLoaded /* Safari 和 Chrome */
{
0%   {-webkit-transform:scale(0,0);opacity:0}
100% {-webkit-transform:scale(1,1);opacity:1}   
}

@-o-keyframes ad2FrameLoaded /* Opera */
{
0%   {-o-transform:scale(0,0);opacity:0}
100% {-o-transform:scale(1,1);opacity:1}   
}
/* div高度变化 */
@-moz-keyframes scaleHeight1 {
    0% {
        -moz-transform: scale(1);
        height: 240px;
        opacity: 1;
        top: 0;
    }
    100% {
        -moz-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-webkit-keyframes scaleHeight1 {
    0% {
        -webkit-transform: scale(1);
        height: 240px;
        opacity: 1;
        top: 0;
    }
    100% {
        -webkit-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-o-keyframes scaleHeight1 {
    0% {
        -o-transform: scale(1);
        height: 240px;
        opacity: 1;
        top: 0;
    }
    100% {
        -o-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@-ms-keyframes scaleHeight1 {
    0% {
        -ms-transform: scale(1);
        height: 240px;
        opacity: 1;
        top: 0;
    }
    100% {
        -ms-transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}
@keyframes scaleHeight1 {
    0% {
        transform: scale(1);
        height: 240px;
        opacity: 1;
        top: 0;
    }
    100% {
        transform: scale(1);
        height: 100%;
        opacity: 1;
        top: 0;
    }
}