Ciao a tutti posto prima il code poi spiego cosa vorrei:
codice HTML:
.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?