[animation] tempo di attesa tra iteration-count

[SoloWiFi]

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

#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;}
}

<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?

[ninja72]

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;

@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.

[SoloWiFi]

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.

[SoloWiFi]

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

#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.

[Vincent.Zeno]