.animate-swing {
    -webkit-animation:swing 1s .2s ease both;
    -moz-animation:swing 1s .2s ease both;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin:top center
    }
    20% {
        -webkit-transform:rotate(15deg)
    }
    40% {
        -webkit-transform:rotate(-10deg)
    }
    60% {
        -webkit-transform:rotate(5deg)
    }
    80% {
        -webkit-transform:rotate(-5deg)
    }
    100% {
        -webkit-transform:rotate(0deg)
    }
}
 @-moz-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -moz-transform-origin:top center
    }
    20% {
        -moz-transform:rotate(15deg)
    }
    40% {
        -moz-transform:rotate(-10deg)
    }
    60% {
        -moz-transform:rotate(5deg)
    }
    80% {
        -moz-transform:rotate(-5deg)
    }
    100% {
        -moz-transform:rotate(0deg)
    }
}


.animate-zoomIn {
    -webkit-animation:zoomIn .6s .2s ease both;
    -moz-animation:zoomIn .6s .2s ease both;
}

@keyframes zoomIn {
    from { opacity: 0;transform: scale3d(.3, .3, .3);}
    50% {opacity: 1;}
}
@-webkit-keyframes zoomIn {
    from { opacity: 0;transform: scale3d(.3, .3, .3);}
    50% {opacity: 1;}
}


.animate-bounce  {
    -webkit-animation:bounce 1s .2s ease both;
    -moz-animation:bounce 1s .2s ease both;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform:translateY(0)
    }
    40% {
        -webkit-transform:translateY(-30px)
    }
    60% {
        -webkit-transform:translateY(-15px)
    }
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform:translateY(0)
    }
    40% {
        -moz-transform:translateY(-30px)
    }
    60% {
        -moz-transform:translateY(-15px)
    }
}

.animate-fadeInX  {
    -webkit-animation:flipInX 1s .2s ease both;
    -moz-animation:flipInX 1s .2s ease both;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform:perspective(400px) rotateX(90deg);
        opacity:0
    }
    40% {
        -webkit-transform:perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform:perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform:perspective(400px) rotateX(0deg);
        opacity:1
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform:perspective(400px) rotateX(90deg);
        opacity:0
    }
    40% {
        -moz-transform:perspective(400px) rotateX(-10deg)
    }
    70% {
        -moz-transform:perspective(400px) rotateX(10deg)
    }
    100% {
        -moz-transform:perspective(400px) rotateX(0deg);
        opacity:1
    }
}

.animate-rollIn {
    -webkit-animation:rollIn 1s .2s ease both;
    -moz-animation:rollIn 1s .2s ease both;
}
@-webkit-keyframes rollIn {
    0% {
        opacity:0;
        -webkit-transform:translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0px) rotate(0deg)
    }
}
@-moz-keyframes rollIn {
    0% {
        opacity:0;
        -moz-transform:translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity:1;
        -moz-transform:translateX(0px) rotate(0deg)
    }
}

.animate-flash {
    -webkit-animation:flash 1s .2s ease both;
    -moz-animation:flash 1s .2s ease both;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}


.animate-tada {
    -webkit-animation:tada 1s .2s ease both;
    -moz-animation:tada 1s .2s ease both;
}
@-webkit-keyframes tada {
    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 tada {
    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)
    }
}

.animate-flipInX {
    -webkit-animation:flipInX 1s .2s ease both;
    -moz-animation:flipInX 1s .2s ease both;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform:perspective(400px) rotateX(90deg);
        opacity:0
    }
    40% {
    -webkit-transform:perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform:perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform:perspective(400px) rotateX(0deg);
        opacity:1
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform:perspective(400px) rotateX(90deg);
        opacity:0
    }
    40% {
        -moz-transform:perspective(400px) rotateX(-10deg)
    }
    70% {
        -moz-transform:perspective(400px) rotateX(10deg)
    }
    100% {
        -moz-transform:perspective(400px) rotateX(0deg);
        opacity:1
    }
}

/* 淡入元素样式 */
.fade-in-element {
    opacity: 0;
    transform: translateY(3.75rem);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 淡入动画类 */
.fade-in {
    opacity: 1;
    transform: translateY(0);
}