@keyframes rotate-anim {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(380deg);

    }

}

.rotate-anim {

    animation-name: rotate-anim;

    animation-duration: 0.3s;

}

.aparecerIzq{
    animation-name: aparecerIzq;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
}
@keyframes aparecerIzq {
    0% {
        transform: translate(-100%);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0%);
    }
}

.irse{
    animation-name: irse;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
}
@keyframes irse {
    0% {
        opacity: 1;
        transform: translate(0%);
    }

    100% {
        transform: translate(-100%);
        opacity: 0;

    }
}