Arresto di un'animazione CSS3 sull'ultimo fotogramma

Ho un'animazione CSS3 in 4 parti riprodotta al clic, ma l'ultima parte dell'animazione è pensata per toglierla dallo schermo.

Tuttavia, torna sempre al suo stato originale una volta che ha giocato. Qualcuno sa come posso fermarlo sul suo ultimo frame CSS (100%) , oppure come sbarazzarsi di tutto il div in cui si trova una volta che ha suonato.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Stai cercando:

animation-fill-mode: forwards;

Maggiori informazioni su MDN e lista di supporto browser su canIuse .

Se si desidera aggiungere questo comportamento a una animationdefinizione di proprietà abbreviata , l'ordine delle proprietà secondarie è il seguente

animation-name- impostazione predefinita none

animation-duration- impostazione predefinita 0s

animation-timing-function- impostazione predefinita ease

animation-delay- impostazione predefinita 0s

animation-iteration-count- impostazione predefinita 1

animation-direction- impostazione predefinita normal

animation-fill-mode- devi impostarlo su forwards

animation-play-state- impostazione predefinita running

Pertanto, nel caso più comune, il risultato sarà qualcosa di simile

animation: colorchange 1s ease 0s 1 normal forwards;

Vedi la documentazione MDN qui

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Supporto per il browser

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

Uso: -

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Il modo migliore sembra mettere lo stato finale nella parte principale del CSS. Come qui, ho impostato la larghezza in 220pxmodo che alla fine diventi 220px. Ma iniziare a0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Non stai risolvendo il problema con webkitAnimationName che non viene ripristinato, quindi questo ripristina il CSS del tuo oggetto al suo stato predefinito. Non rimarrà dove è finito se si rimuove semplicemente la funzione setTimeout che ripristina lo stato?

Ho appena pubblicato una risposta simile e probabilmente vorrai dare un'occhiata a:

http://www.w3.org/TR/css3-animations/#animation-events-

Puoi scoprire aspetti di un'animazione, come start e stop, e poi, una volta che l'evento "stop" è stato attivato, puoi fare tutto ciò che vuoi sul dom. L'ho provato qualche tempo fa e può funzionare, ma immagino che per il momento sarai limitato al webkit (ma probabilmente lo hai già accettato). A proposito, dato che ho pubblicato lo stesso link per 2 risposte, offro questo consiglio generale: controlla il W3C - praticamente scrivono le regole e descrivono gli standard. Inoltre, le pagine di sviluppo del webkit sono piuttosto importanti.

Nessuno l'ha effettivamente portato così, il modo in cui è stato fatto funzionare è stato messo in pausa lo stato di animazione .

Ho imparato oggi che esiste un limite che si desidera utilizzare per la modalità di riempimento. Questo proviene da un sviluppatore Apple. La voce è * circa * sei, ma non è certa. In alternativa, è possibile impostare lo stato iniziale della classe su come si desidera che l'animazione termini, quindi * inizializzarla * da / 0%.