Parando uma animação CSS3 no último quadro

Eu tenho uma animação CSS3 de 4 partes sendo reproduzida com um clique - mas a última parte da animação serve para tirá-la da tela.

No entanto, ele sempre volta ao seu estado original após ser reproduzido. Alguém sabe como eu posso pará-lo em seu último quadro css (100%) , ou então como me livrar de todo o div em que ele está depois de jogar.

@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); }
}

Você está procurando:

animation-fill-mode: forwards;

Mais informações sobre a lista de suporte ao MDN e ao navegador no canIuse .

Se você deseja adicionar esse comportamento a uma animationdefinição de propriedade abreviada , a ordem das subpropriedades é a seguinte

animation-name- padrão none

animation-duration- padrão 0s

animation-timing-function- padrão ease

animation-delay- padrão 0s

animation-iteration-count- padrão 1

animation-direction- padrão normal

animation-fill-mode- você precisa definir isso para forwards

animation-play-state- padrão running

Portanto, no caso mais comum, o resultado será algo como isto

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

Consulte a documentação MDN aqui

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

Suporte do navegador

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

A melhor maneira parece colocar o estado final na parte principal do css. Como aqui, eu coloco largura em 220px, para que finalmente se torne 220px. Mas começando 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;}
}  

Não é seu problema que você está configurando o webkitAnimationName de volta para nada, então isso redefinirá o CSS do seu objeto para o estado padrão. Ele não permanecerá onde terminou se você remover a função setTimeout que está redefinindo o estado?

Acabei de publicar uma resposta semelhante e você provavelmente deseja dar uma olhada:

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

Você pode descobrir aspectos de uma animação, como iniciar e parar, e depois dizer que o evento 'stop' foi acionado, você pode fazer o que quiser para o dom. Eu tentei isso há algum tempo, e pode funcionar, mas acho que você ficará restrito ao webkit por enquanto (mas você provavelmente já aceitou). Btw, como eu publiquei o mesmo link para 2 respostas, eu daria este conselho geral: confira o W3C - eles praticamente escrevem as regras e descrevem os padrões. Além disso, as páginas de desenvolvimento do webkit são bastante importantes.

Ninguém actualy trouxe-lo, a forma como foi feito para o trabalho é animação play-estado pronto para uma pausa.

Aprendi hoje que há um limite que você deseja usar para o modo de preenchimento. Isto é de um desenvolvedor da Apple. O boato é de cerca de seis, mas não é certo. Como alternativa, você pode definir o estado inicial da sua classe como deseja que a animação termine e, em seguida, * inicialize-a em / 0%.