/* 淡入-从上 */
.csdr{
    -webkit-animation:1.5s ease-out backwards;
    -moz-animation:1.5s ease-out backwards;
    -ms-animation:1.5s ease-out backwards;
    animation:1.5s ease-out backwards;
}
.csdr{
    -webkit-animation-name:fadeinT;
    -moz-animation-name:fadeinT;
    -ms-animation-name:fadeinT;
    animation-name:fadeinT;
    opacity: 1 !important;
   }
@-webkit-keyframes fadeinT{
    0%{opacity:0;-webkit-transform:translateY(-100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}

}
@-moz-keyframes fadeinT{
    0%{opacity:0;-moz-transform:translateY(-100px);}
    100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
    0%{opacity:0;-ms-transform:translateY(-100px);}
    100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px);}
    100%{opacity:1;transform:translateY(0);}
}
/* 淡入-从下 */
.cxdr{
    -webkit-animation:1.5s ease-out backwards;
    -moz-animation:1.5s ease-out backwards;
    -ms-animation:1.5s ease-out backwards;
    animation:1.5s ease-out backwards;}
.cxdr{
    -webkit-animation-name:fadeinB;
    -moz-animation-name:fadeinB;
    -ms-animation-name:fadeinB;
    animation-name:fadeinB;
    opacity: 1 !important;}
@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(100px);}
    100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(100px);}
    100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px);}
    100%{opacity:1;transform:translateY(0);}
}


/* 淡入-从左 */
.czdr{
    -webkit-animation:2s ease-out backwards;
    -moz-animation:2s ease-out backwards;
    -ms-animation:2s ease-out backwards;
    animation:2s ease-out backwards;
    opacity: 1 !important;}
.czdr{
    -webkit-animation-name:fadeinL;
    -moz-animation-name:fadeinL;
    -ms-animation-name:fadeinL;
    animation-name:fadeinL;}
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px);}
    100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px);}
    100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px);}
    100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px);}
    100%{opacity:1;transform:translateX(0);}
}


/* 淡入-从右 */
.cydr{
    -webkit-animation:2s ease-out backwards;
    -moz-animation:2s ease-out backwards;
    -ms-animation:2s ease-out backwards;
    animation:2s ease-out backwards;
    opacity: 1 !important;}
.cydr{
    -webkit-animation-name:fadeinR;
    -moz-animation-name:fadeinR;
    -ms-animation-name:fadeinR;
    animation-name:fadeinR;}
@-webkit-keyframes fadeinR{
    0%{opacity:0;-webkit-transform:translateX(100px);}
    100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
    0%{opacity:0;-moz-transform:translateX(100px);}
    100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
    0%{opacity:0;-ms-transform:translateX(100px);}
    100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px);}
    100%{opacity:1;transform:translateX(0);}
}


/* 震铃 */
@-webkit-keyframes ring{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes ring{
    0%{-moz-transform:scale(1);}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    100%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes ring{
    0%{-ms-transform:scale(1);}
    10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
    100%{-ms-transform:scale(1) rotate(0);}
}
@keyframes ring{
    0%{transform:scale(1);}
    10%,20%{transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
    100%{transform:scale(1) rotate(0);}
}




/* 淡入-从下 */
.dr{
    -webkit-animation:1.2s ease-out backwards;
    -moz-animation:1.2s ease-out backwards;
    -ms-animation:1.2s ease-out backwards;
    animation:1.2s ease-out backwards;}
.dr{
    -webkit-animation-name:dr;
    -moz-animation-name:dr;
    -ms-animation-name:dr;
    animation-name:dr;
    opacity: 1 !important;}
@-webkit-keyframes dr{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-moz-keyframes dr{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-ms-keyframes dr{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes dr{
    0%{opacity:0;}
    100%{opacity:1;}
}