#cafe{
    transform: translateX(-80%);
    animation: moveCafe 1.8s .5s ease-out both;    
}


#planeta{
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: rotate(360deg) scale(.9);
    animation: movePlaneta 2.8s .5s alternate both;
}
#telefono24{
    transform-origin: 100% 50%;
    transform-box: fill-box;
    transform: rotate(45deg);
    animation: moveTelefono 3s .5s alternate both;
}
#planta{
    transform: translateX(50%);
    animation:movePlanta 1.8s .6s ease-out both;
}
#mensajeIzquierda{
    transform: translateX(-50%);
    animation: mensajeIzquierda 3s 2s ease-out both;
}
#mensajeDerecha{
    transform:translateX(50%);
    animation: mensajeIzquierda 3s 2.8s ease-out both;
}
#izquierdabtn-2{
    transform: translateX(-2.5%);
    animation: botonMensaje 2s 5s  alternate 5 both;
}

#izquierdabtn-3{
    transform: translateX(-5%);
    animation: botonMensaje 2s 5s  alternate 5 both;
}
#izquierdabtn-4{
    transform: translateX(-7.5%);
    animation: botonMensaje 2s 5s  alternate 5 both;
}

#mnsjBTN-2{
    transform: translateX(-2.5%);
    animation: botonMensaje 2s 5s alternate 5 both;
}
#mnsjBTN-3{
    transform: translateX(-5%);
    animation: botonMensaje 2s 5s alternate 5 both;
}
#mnsjBTN-4{
    transform: translateX(-7.5%);
    animation: botonMensaje 2s 5s alternate 5 both;
}

@keyframes botonMensaje {
    100%{
    transform: unset;
    }
}
@keyframes mensajeIzquierda {
    100%{
        transform: unset;
    }
}

@keyframes movePlanta  {
    100%{
        transform: unset;
    }
}

@keyframes moveTelefono {
    100%{
        transform:rotate(0deg);
    }    
}

@keyframes movePlaneta {
    100%{
        transform: rotate(0deg) scale(1.21);
    }
}

@keyframes moveCafe {
    100%{
        transform: unset ;
    }
}