Parando uma animação CSS3 no último quadro

181

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); }
}
user531192
fonte
Ei Nick, você pode postar o css e o html que está usando?
Sebastian Patane Masuelli
Oi Sebastian, eu atualizei minha pergunta com o css e javascript. O único html que estou usando é uma div com um onclick para iniciar a função rotate.
usar o seguinte comando
possível duplicata não pode parar de animação no fim de um ciclo
MPelletier

Respostas:

376

Você está procurando:

animation-fill-mode: forwards;

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

methodofaction
fonte
8
Você sabe se isso funciona no chrome? Não
tenho
4
Aceite isso como a resposta correta. Mais explicações sobre este: 4waisenkinder.de/blog/2014/10/13/…
miron
@ user531192 Para Chrome / navegadores Webkit você tem que usar -webkit-animation-fill-mode: forwards;
eivindml
O Chrome não precisa do -webkit- prefixo mais agora (pelo menos do v49)
Capsule
1
Um problema que tive com isso foi que eu não tinha um 100% {}ou to {}conjunto, então mesmo com a animation-fill-mode: forwards;minha animação ainda me deixaria 0%. (Eu estava usando alguns laços @for para criar minhas animações e se esqueceu de adicionar manualmente um from{}e to{});
Phil Tune
25

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

davnicwil
fonte
19
-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;
  }
}
Hitesh Sahu
fonte
5

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;}
}  
Optimus Prime
fonte
Isso é ótimo, a melhor maneira de lidar com esse problema, eu acho.
Tirou Baker
Se você usar um atraso de animação, ele começará com o estado final, redefinirá para 0% e depois anima para 100%. Não é o ideal e visualmente dissonante.
Deborah
3

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?

jfriend00
fonte
1

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.

Jesse
fonte
-2

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

iheartflex
fonte