A propriedade CSS Animation permanece após a animação


92

Estou tentando fazer com que uma propriedade de animação CSS permaneça após a conclusão, isso é possível?

É isso que estou tentando alcançar ...

O elemento deve ser ocultado quando o usuário chega à página, após 3 segundos (ou o que for), ele deve aparecer gradualmente e assim que a animação for concluída, deve permanecer lá.

Aqui está uma tentativa de violino ... http://jsfiddle.net/GZx6F/

Aqui está o código para preservação ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Eu sei fazer isso com o jQuery .. seria assim ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

O w3schools está desatualizado? Diz que o Chrome e o FireFox suportam apenas alternativas.
iambriansreed

5
@iambriansreed: Eu sempre presumo que seja :)
BoltClock

4
@iambriansreed nem clica nos resultados de pesquisa do w3schools. Se o fizer acidentalmente, desvie o olhar do monitor e pressione o botão Voltar do mouse.
doug65536

Respostas:


162

Acho que você está procurando uma animation-fill-modepropriedade CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

A propriedade CSS animation-fill-mode especifica como uma animação CSS deve aplicar estilos a seu destino antes e depois de ser executada.

para o seu propósito, apenas tente definir

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Definindo valor para a frente «o alvo irá reter os valores computados definidos pelo último quadro-chave encontrado durante a execução»


1
Obrigado Fabrizio, que bom, aceito essa resposta. Apenas uma coisa estranha está acontecendo e eu me pergunto se você sabe alguma coisa sobre - no iOS (não testei mais nada), a contagem regressiva para a facilidade é pausada sempre que eu rolar, por exemplo, se eu começar a rolar imediatamente quando a página carregar ele não desaparece. Mas quando eu PARO de rolar, os 3s começam a contagem regressiva. Este é apenas o comportamento padrão do iOS? Obrigado
SparrwHawk

Que solução fantástica.
Lalnuntluanga Chhakchhuak

16

Além da resposta de @Fabrizio Calderan , é preciso dizer que você pode até inscrever o animation-fill-modeimóvel forwardsdiretamente no animation. Portanto, o seguinte também deve funcionar:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>


0

Algo semelhante aconteceu comigo. Eu adicionei a posição: relativa ao elemento que estava animando e que fixou para mim.


0

Como animar um elemento e fazer com que ele permaneça enquanto a animação é feita:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.