#bluerect1{
    -webkit-animation: translateBlue 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: translateBlue 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


#redrect {
    -webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0) ;
        transform: scale(0);
        opacity: 1;
    }



    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
       
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(300px) rotate(43.000000);
        transform: translateX(300px) rotate(43.000000);
        opacity: 1;
    }
}



@-webkit-keyframes translateBlue {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }



    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes translateBlue {
    0% {
        -webkit-transform: translateX(-100px);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: rotateY('43deg');
        opacity: 1;
    }
}




.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}