Solucionado
Seguinte o exemplo da aula, a função não funciona, não acontece nada no codigo.
HTML ...
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); } } ...
hoje, com a Alura e o Google Gemini
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.