Mettere in ordine le transizioni

[techno]

Ciao a tutti posto prima il code poi spiego cosa vorrei:

.cnt-textarea span:nth-child(3),
.cnt-textarea span:nth-child(5)
{
    position: absolute;
    height: 2px;
    background-color: rgb(255, 94, 0);
    left: 0;
    width: 0;
    z-index: 4;
    transition: .3s ease-in-out width;
}

cnt-textarea span:nth-child(3)
{
    bottom: 0;
}

.cnt-textarea span:nth-child(5)
{
    top: 0;
    transition-delay: .3s;
}

.cnt-textarea textarea:focus ~ span:nth-child(3),
.cnt-textarea textarea:valid ~ span:nth-child(3)
{
    width:100%;
}

.cnt-textarea textarea:focus ~ span:nth-child(4),
.cnt-textarea textarea:valid ~ span:nth-child(4)
{
    height: 100%;
}

allora in poche parole quando do il focus o la validita alla textarea mi parte l'animazione prima con lo span 3 e poi con lo span 5
ora quando tolgo il focus alla textarea riparte l'animazione in senso inverso solo che parte sempre prima lo span 3 e poi il 5 io vorrei che quando tolgo il focus partisse prima l'ultima animazione effettuata per avere un effetto più omogeneo come si può fare?

[KillerWorm]

Ciao, non so se hai già risolto, diversamente ti chiedo se puoi postare un link alla pagina in questione; con solo il codice css che hai postato viene difficile riprodurre il problema e capire come poter intervenire.