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

    [animation] tempo di attesa tra iteration-count

    Ho questo CSS che mi fa comparire un Div. Una volta comparso scompare allo stesso modo.

    codice:
    #MyDiv {    
        top:40%;
        left:0em;
        width:0em;
        overflow:hidden;
        animation-name: DivShow;
        animation-duration: 5s;
        animation-delay: 3s;
        animation-iteration-count: 2;
        animation-direction: alternate;    
    }
    @keyframes DivShow {
        0%   {width:0em;}
        100% {width:10em;}
    }
    codice:
    <div id="MyDiv">Test Div a Comparsa-Scomparsa</div>
    Non riesco a trovare il modo di mantenerlo visibile per tot secondi e poi farlo chudere.
    Come si indica il timeout tra le iterazioni impostate?

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    131
    Penso tu debba giocare con la durata dell'animazione e relativi keyframe, tieni presente che animation-delay si aggiunge al discorso tempo animazione. (3+3sec)

    diciamo che per avere un pausa di circa 10 sec dovresti fare cosi (anche se in realtà l'animazione è di 13sec contando i delay):

    animation-duration: 7s;

    codice:
    @keyframes DivShow {
                0% {
                    width: 0em;
                }
                50% {
                    width: 10em;
                }
                100% {
                    width: 10em;
                }
            }
    Se sbaglio qualcosa invito tutti a correggere le mie informazioni, non sono molto esperto di animation css.

  3. #3
    Il delay indica quando deve partire l'animazione dopo il caricamento della pagina.

    A me serve di intramezzare un tempo tra l'apertura e la chiusura.

  4. #4
    Ho risolto il problema aggiungendo una seconda animazione e riducendo la prima e sintetizzando i comandi delle animazioni per comodità.
    Per l'arricchimento del forum posto la soluzione

    codice:
    #MyDiv {    
        top:40%;
        left:0em;
        width:0em;
        overflow:hidden;
        animation: DivShow 5s 3s forwards, DivHidden 5s 15s forwards;    
    }
    @keyframes DivShow {
        0%   {width:0em;}
        100% {width:10em;}
    }
    @keyframes DivHidden {
      0%   {width:10em;}
      100% {width:0em;}
    }
    In questo modo, la prima animazione attende 3 secondi prima di iniziare e dura 5 secondi. Subito dopo parte la seconda ma attende 15 secondi (la pausa che mi interessava) e poi inizia con la durata di 5 secondi.
    Quel forwards indica che il div deve mantenere l'ultima impostazione ricevuta.

    In pratica questo è un Div che si allarga di 10em, fa una pausa di 15 secondi e poi si restringe di 10em.

    Partendo da 0em significa che prima compare e poi scompare.
    Ultima modifica di SoloWiFi; 01-10-2020 a 10:32

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,798

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