/* spin */
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes spin {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

/* spin-back */
@-webkit-keyframes spin-back {
    from {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    to {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
}

@-moz-keyframes spin-back {
    from {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes spin-back {
    from {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

/* spin 90 */
@-webkit-keyframes spin90 {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-moz-keyframes spin90 {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@keyframes spin90 {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

/* spin 90 back */
@-webkit-keyframes spin90-back {
    from {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    to {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
}

@-moz-keyframes spin90-back {
    from {
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes spin90-back {
    from {
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    to {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

/* bounce in */
@keyframes bounce-in {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3) translate3d(0,0,0);
        -ms-transform: scale(0.3) translate3d(0,0,0);
        -o-transform: scale(0.3) translate3d(0,0,0);
        -webkit-transform: scale(0.3) translate3d(0,0,0);
        transform: scale(0.3) translate3d(0,0,0);
    }

    50% {
        opacity: 0.9;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    80% {
        opacity: 1;
        -moz-transform: scale(0.89);
        -ms-transform: scale(0.89);
        -o-transform: scale(0.89);
        -webkit-transform: scale(0.89);
        transform: scale(0.89);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1) translate3d(0,0,0);
        -ms-transform: scale(1) translate3d(0,0,0);
        -o-transform: scale(1) translate3d(0,0,0);
        -webkit-transform: scale(1) translate3d(0,0,0);
        transform: scale(1) translate3d(0,0,0);
    }
}

/* fly-in */
@keyframes fly-in {
    from {
        -moz-translate: translate(450px, 0);
        -ms-translate: translate(450px, 0);
        -o-translate: translate(450px, 0);
        -webkit-translate: translate(450px, 0);
        transform: translate(450px, 0);
    }

    to {
        -moz-translate: translate(0, 0);
        -ms-translate: translate(0, 0);
        -o-translate: translate(0, 0);
        -webkit-translate: translate(0, 0);
        transform: translate(0, 0);
    }
}