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

animações CSS/JS

Fala pessoal, tudo bem? Uma dúvida sobre animações CSS/JS:

Eu gostaria de saber qual a melhor prática quando o assunto é fazer animações um pouco mais complexas na página. Por exemplo: quando eu chego numa parte do site, os elementos vão aparecendo um de cada vez.

Eu já consegui metade disso: quando chego numa seção do site, os elementos (antes escondidos - display: none) aparecem. Porém, todos aparecem de uma vez só. Gostaria de melhorar a UX e fazê-los aparecerem cadenciadamente.

Já pensei em usar um setTimeout ou o animate do jQuery, mas tenho a impressão de que não é o ideal.

Enfim, qual a melhor forma para isso?

2 respostas
solução!

Boa noite, Guilherme! Como vai?

Vc consegue fazer esse tipo de coisa só com CSS mesmo! Só que o problema é que a propriedade display não pode ser animada, como pode ser visto na seção "Definition and Usage" da documentação!

O ideal para essa situação, é utilizar a propriedade opacity, pois ela sim é animável!

Para saber mais: https://www.w3schools.com/css/css_image_transparency.asp

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Aah sim, entendi!

E para controlar a ordem em que os elementos aparecem?

Eu pensei em criar keyframes para cada elemento, mas não consigo lembrar de nenhuma forma para fazer com que apareça um elemento após o outro.