body {
    margin:50px;
}

.box-relative {
    width: 400px;
    margin: auto;
    position: relative;
}

#logo {
    width: 390px;
    height: 170px;
    background: url(../img/logo.jpg) no-repeat;
    opacity: 0;
    position: absolute;
    right: -230px;
}

#logo.animatelogo {
    animation-name: fade-logo;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-logo {
    40% {
        opacity: 0;
        right: -300px;
        top: 0px;
    }
    
    to {
        opacity: 1;
    }
}

/*------------------One------------------*/

#squareone {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #124f89;
    position: absolute;
    left: 100px;
    top: 0px;
    opacity: 0;
}

#squareone.animateone {
    animation-name: fade-one;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-one {
    1% {
        opacity: 0;
        left: 100px;
        top: -50px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Two------------------*/

#squaretwo {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #124f89;
    position: absolute;
    left: 157px;
    top: 3px;
    opacity: 0;
}

#squaretwo.animatetwo {
/*    animation: fade-two 1s forwards;*/
    animation-name: fade-two;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-two {
    6% {
        opacity: 0;
        left: 250px;
        top: -150px;
        transform: scale(5);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Three------------------*/

#squarethree {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #890b95;
    position: absolute;
    left: 161px;
    top: 25px;
    opacity: 0;
}

#squarethree.animatethree {
/*    animation: fade-three 1s forwards;*/
    animation-name: fade-three;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-three {
    12% {
        opacity: 0;
        left: 250px;
        transform: scale(5);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Four------------------*/

#squarefour {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #890b95;
    position: absolute;
    left: 120px;
    top: 57px;
    opacity: 0;
}

#squarefour.animatefour {
    animation-name: fade-four;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-four {
    18% {
        opacity: 0;
        left: 110px;
        top: 160px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Five------------------*/

#squarefive {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #124f89;
    position: absolute;
    left: 178px;
    top: 62px;
    opacity: 0;
}

#squarefive.animatefive {
    animation-name: fade-five;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-five {
    21% {
        opacity: 0;
        left: 310px;
        top: 160px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Six------------------*/

#squaresix {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #124f89;
    position: absolute;
    left: 175px;
    top: 105px;
    opacity: 0;
}

#squaresix.animatesix {
    animation-name: fade-six;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-six {
    23% {
        opacity: 0;
        left: 310px;
        top: 270px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Seven------------------*/

#squareseven {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #890b95;
    position: absolute;
    left: 135px;
    top: 115px;
    opacity: 0;
}

#squareseven.animateseven {
    animation-name: fade-seven;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-seven {
    25% {
        opacity: 0;
        left: 110px;
        top: 310px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Eight------------------*/

#squareeight {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #124f89;
    position: absolute;
    left: 79px;
    top: 66px;
    opacity: 0;
}

#squareeight.animateeight {
    animation-name: fade-eight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-eight {
    28% {
        opacity: 0;
        left: 0px;
        top: 130px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Nine------------------*/

#squarenine {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #890b95;
    position: absolute;
    left: 49px;
    top: 17px;
    opacity: 0;
}

#squarenine.animatenine {
    animation-name: fade-nine;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-nine {
    3% {
        opacity: 0;
        left: -50px;
        top: -70px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Ten------------------*/

#squareten {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #890b95;
    position: absolute;
    left: 18px;
    top: 34px;
    opacity: 0;
}

#squareten.animateten {
    animation-name: fade-ten;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-ten {
    31% {
        opacity: 0;
        left: -90px;
        top: -20px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Eleven------------------*/

#squareeleven {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #890b95;
    position: absolute;
    left: 48px;
    top: 68px;
    opacity: 0;
}

#squareeleven.animateeleven {
    animation-name: fade-eleven;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-eleven {
    33% {
        opacity: 0;
        left: -90px;
        top: 150px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}

/*------------------Twelve------------------*/

#squaretwelve {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #124f89;
    position: absolute;
    left: 08px;
    top: 64px;
    opacity: 0;
}

#squaretwelve.animatetwelve {
    animation-name: fade-twelve;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-twelve {
    36% {
        opacity: 0;
        left: -190px;
        top: 160px;
        transform: scale(3);
    }
    
    to {
        opacity: 1;
    }
}