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

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