Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Mettere in ordine le transizioni

    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?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.