.parallelogram {
    width: 3em;
    height: 6em;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: #297cbd;
}

.parallelogram.part2{
    background: #84bae7;
    animation: logo-part2-h 1s forwards, logo-part2-v 1s forwards;
}

@keyframes logo-part2-h {
    from {left: 0em;}
    to {left: 3.5em;}
}

@keyframes logo-part2-v {
    from {top: 0em;}
    to {top: 1.5em;}
}

.parallelogram.part3{
     background:#bcdcf1;
     animation: logo-part3-h 1s forwards, logo-part3-v 1s forwards;
}

@keyframes logo-part3-h {
    from {left: 0em;}
    to {left: 7em;}
}

@keyframes logo-part3-v {
    from {top: 0em;}
    to {top:3em;}
}