Divs set with vw and transition values not scaling smoothly. Any fix?

Here's my example at Jsfiddle

HMTL

<div class="right1"></div>  
<div class="right2"></div>  
<div class="right3"></div>  
<div class="right4"></div>  
<div class="right5"></div>

<div class="cube"></div>
</div>

CSS

 .cube-cont {
    width: 20vw;
    height: 20vw;
    background-color: #877c7f;
    margin: 20vh auto;
    position: relative;
}

.right1,
.right2,
.right3,
.right4,
.right5 {
    width: 15vw;
    height: 4vw;
    background-color: #7FC7A6;
    position: absolute;
    top: 0;
    left: 20vw;
    transition: all 1s;
    transform: translateX(-12vw);
}

.right2 {
    top: 4vw;
}

.right3 {
    top: 8vw;
}

.right4 {
    top: 12vw;
}

.right5 {
    top: 16vw;
}

.right1:hover,
.right2:hover,
.right3:hover,
.right4:hover,
.right5:hover {
    transform: 1s;
    transform: translateX(0);
}

.cube {
    width: 20vw;
    height: 20vw;
    background-color: #877c7f;
    position: absolute;
    top: 0;
    right: 0;
}

As you can see, when the window resizes the green divs' scaling is delayed slightly which makes resizing appear messy. The grey cube scales perfectly, so it appears to be the transition values causing it.

Any way to fix this so they scale uniformly?

Thanks.