Mantendo o estado final no final de uma animação CSS3

301

Estou executando uma animação em alguns elementos definidos opacity: 0;no CSS. A classe de animação é aplicada no Click e, usando quadros-chave, altera a opacidade de 0para 1(entre outras coisas).

Infelizmente, quando a animação termina, os elementos retornam para opacity: 0(no Firefox e no Chrome). Meu pensamento natural seria que os elementos animados mantêm o estado final, substituindo suas propriedades originais. Isso não é verdade? E se não, como posso obter o elemento para fazer isso?

O código (versões prefixadas não incluídas):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
css css-animations Dan
fonte
1
Vou postar meu próprio aviso de repetição: stackoverflow.com/questions/9196694/css3-animation-scale Pelo menos o meu tem um título mais instrutivo!
Dan
possível duplicação do CSS3 Animate: Como fazer com que o objeto não volte à sua posição inicial após a execução da animação?
Michael Mullany

Respostas:

528

Tente adicionar animation-fill-mode: forwards;. Por exemplo, assim:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Christofer Vilander
fonte
1
Sim, é isso. Vou verificar sua resposta quando eu puder. Se qualquer chefe de CSS quiser comentar a lógica por trás disso, eu adoraria saber!
Dan
8
Você pode ler sobre a propriedade modo de preenchimento de animação aqui - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Espero que ajude!
Christofer Vilander
6
@Dan o forwardsvalor da animation-fill-modepropriedade garante que o elemento mantenha o último estado da animação do quadro-chave após o término da animação. por exemplo, se sua animação mudar widthde 0 para 100 px, essa propriedade garante que o elemento permaneça com 100 px de largura após o término da animação.
Farzad YZ
5
não esqueça de especificar 100% / topoint in, @keyframecaso contrário não funcionará.
Tomasz Mularczyk
animation-fill-mode: os encaminhadores também fizeram o truque para mim, mas somente depois de adicionar o imperativo '! important' à regra
shayuna 27/03/18
26

Se você estiver usando mais atributos de animação, a abreviação é:

animation: bubble 2s linear 0.5s 1 normal forwards;

Isto dá:

  • 2s duração
  • linear função de temporização
  • 0.5s demora
  • 1 iteração-contagem (pode ser infinito)
  • normal direção
  • forwards modo de preenchimento (definido para trás, se você deseja ter compatibilidade para usar a posição final como o estado final)
agiopnl
fonte
14

Se não estiver usando THE SHORT Versão mão: certifique-se o animation-fill-mode: forwardsé APÓS a declaração animação ou não vai funcionar ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Taylor A. Leach
fonte
1
Você está certo. Atualizei minha resposta. Obrigado, deslizou minha mente haha.
Taylor A. Leach
4

Use o modo de preenchimento de animação: para frente;

animation-fill-mode: forwards;

O elemento reterá os valores de estilo definidos pelo último quadro-chave (depende da direção da animação e da contagem da iteração da animação).

Nota: A regra @keyframes não é suportada no Internet Explorer 9 e versões anteriores.

Exemplo de trabalho

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
Expandir snippet

Deepu Reghunath
fonte