#cuadroMorado-1{
    transform: translateX(-50%);
    animation: moveCuadro 2s 1.5s both;
}
#cuadroMorado-2{
    transform: translateX(-50%);
    animation: moveCuadro 2s 1s both;
}
#cuadroMorado-3{
    transform: translateX(-50%);
    animation: moveCuadro 2s .5s both;
}
#numero{
    opacity:0;
    animation: letras 2s 3s both;
}
#porcentaje{
    transform: translateY(-50%);
    animation: moveCuadro 2s 3s both;
}
#tarjetaPersona{
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: scale(.9);
    animation: persona 2s .5s  both
}
#planta{
    transform-box: fill-box;
    transform: scale(.9);
    opacity: 0;
    animation: movePlanta 2s .5s both;
}
#campana{
    transform-box: fill-box;
    transform-origin: 100% 0%;
    transform: rotate(-25deg);
    animation: moveCampana  2s .5s alternate 4 both
}
@keyframes moveCampana {
    100%{
        transform: unset;
    }
}



@keyframes movePlanta {
    50%{
        opacity: 0.5;
        transform:scale(1)
    }
    100%{
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes persona {
    100%{
        transform: scale(1.1);
    }
}

@keyframes letras {
    100%{
        opacity: 1;
    }
}

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