Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida no Ex. 8 da Aula 13 - Transições e animações

Seguinte o exemplo da aula, a função não funciona, não acontece nada no codigo.

HTML ...

  • Eficiência
  • Boas práticas
  • Código limpo
  • CSS3
  • HTML5
  • JavaScript
  • Acessibilidade
  • Responsivo
  • Otimizações
  • Agilidade
  • Design
Foto de João da Silva

João da Silva

Desenvolvedor web

...

CSS ... .palavras-home { animation: aparece 2s; -webkit-animation: aparece 2s; }

@keyframes aparece { 0% { opacity: 0; transform: scale(0.001); } } @-webkit-keyframes aparece { 0% { opacity: 0; transform: scale(0.001); } } ...

3 respostas
solução!

Linneu você definiu apenas o que a animation vai fazer em 0%, falta definir o que ela fará em 100%.

Tente:

@keyframes aparece {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }

Veja se resolve o seu problema.

Na aula ele só aparece o 0%. eu fiz uma mudança de posição no CSS, sem modificar nada e funcionou milagrosamente.

Analisei com mais calma seu css e o do curso.

Na sua animação em vez de 0% coloque from(100%), que resolverá o problema.

Não sei a mudança que você fez, mas peguei meu projeto e comparei com o seu e constatei essa diferença.