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
    4,231
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2019 vBulletin Solutions, Inc. All rights reserved.