/*ROTATING*/
@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/*SHAKE*/
@keyframes shake {
    0% {
        transform: translate(4px, 0);
    }
    50% {
        transform: translate(-4px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@-moz-keyframes shake {
    0% {
        -moz-transform: translate(4px, 0);
    }
    50% {
        -moz-transform: translate(-4px, 0);
    }
    100% {
        -moz-transform: translate(0, 0);
    }
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate(4px, 0);
    }
    50% {
        -webkit-transform: translate(-4px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-ms-keyframes shake {
    0% {
        -ms-transform: translate(4px, 0);
    }
    50% {
        -ms-transform: translate(-4px, 0);
    }
    100% {
        -ms-transform: translate(0, 0);
    }
}
@-o-keyframes shake {
    0% {
        -o-transform: translate(4px, 0);
    }
    50% {
        -o-transform: translate(-4px, 0);
    }
    100% {
        -o-transform: translate(0, 0);
    }
}



/* ANIMATE TOP*/
/*
    * Traslada el elemento de arriba hacia abajo
*/
@-webkit-keyframes animateTop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animateTop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}



/*SWING X*/
@-webkit-keyframes swingX {
    15% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}



/*SWING y*/
@keyframes swingY {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}