Comportamento estranho na animação das palavras

Oi Raul, tudo bem? Antes de qualquer coisa, queria te fazer um pedido. Quando referenciar outros tópicos, coloca o link junto pra gente poder ver o outro tópico e entender melhor o que você está falando sobre ele, tá bem? Isso ajuda até mesmo outros alunos.

Segundo, como seu problema se trata sobre questões de código. Cola o trecho do código que acha ser o problemático aqui pra gente analisar uma solução?

Assim fica tudo centralizado pra quem quiser tentar ajudar você e ainda faz com que a solução para o sua dúvida possa ser resolvida mais rapidamente. Tá bem? Você poderia fazer isso por favor?

Olá Wanderson,

Editei o tópico da forma que você sugeriu, estava tarde quando criei e acabei pulando essas etapas =)

Espero que tenha ficado melhor para entender, valeu.

Oi Raul, agora ficou mais claro. Quanto a sua pergunta, não sei dizer que há uma limitação, mas mesmo em outros cenários é complicado sincronizar animações paralelas.

Lembrando que tem o fator percepção. As vezes a animação mesmo muito bem sincronizada, percebemos esses pequenos pulos. As vezes isso pode estar atrelado ao processamento da mesma, interrupções por causa da interpretação tardia de scripts, etc. Mesmo nas animações mais simples, podem haver gargalos.

O Sergio Lopes tem uma palestra muito bacana que fala sobre performance com animações e exemplos de como não cair nos gargalos de travamento.

Será que se você trocar o opacity, por filter: opacity, algo não muda? https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Testei com o filter e o comportamento continuou da mesma forma, por algum motivo.

No primeiro caso, onde coloco o 'transform: scale()' e o 'opacity' juntos, a animação funciona de maneira estranha perto do seu final.

No segundo caso, onde separo em duas animações para o mesmo elemento, somente a que vem por último funciona, como se sobrepusesse à outra.

Acredito que em casos assim o caminho é planejar e adaptar uma eventual animação que se queira usar, como você sugeriu, para tentar driblar essas limitações :)

Obrigado.

Oi Raul, você consegue me disponibilizar um zip do seu projeto pra eu testar alguma alternativa? Algo no github ou mesmo um link pra download?

Opa Wanderson, segue o link do projeto no github então, modifiquei o arquivo "index.css" para deixar com a animação com o comportamento estranho que mencionei, se precisar de algo a mais avisa.

https://github.com/ruawl/FirstHomepage

Oi Raul, desculpa a demora. O finalzinho de ano é sempre complicado de manter o ritmo nas mensagens. Eu acabei de baixar o seu projeto. Vou analisar e procurar uma solução, talvez isso demore um pouco, tá bem? Qualquer coisa, se eu demorar mais de 2 dias, posta algo aqui que assim serve de lembrete.

Desculpa mesmo, vou ver isso hoje ainda se puder.

Raul, eu não consegui entender o problema de fato, mas até onde vi, me parece que é por causa das diferenças nos cálculos das escalas. Veja por exemplo que você aumenta a escala do elemento pai, até ai OK, todos os filhos recebem a mesma regra, juntamente com a opacidade.

Mas depois que a animação termina, o scale é recalculado por causa que cada filho tem seu próprio scale pra reduzir o tamanho da fonte. Mas a animação, não altera o tamanho da fonte dos elementos filhos, só a escala do elemento pai.

Então, depois que o elemento pai termina a animação, os elementos filhos terão seus scales recalculados. Esses scales não fazem parte da animação e por isso são feitos apenas no final quando há um salto no tamanho final da fonte.

Solução básica: mover a animação para os elementos li:

.palavras-chave li {
    animation: aparece 2s;
}

Lembrando que como também é feito cálculos com porcentagens de font-size e scale, Isso torna o problema um pouco mais complicado. A solução acima já resolve, mas você vai perceber que a animação muda um pouco, ela não vem mais de trás da imagem.

Eu não consegui pensar em outra solução que mantivesse a mesma animação. Desculpa.

Eu estou refazendo este curso. Quem sabe quando chegar nessa etapa, eu pense em algo.