@Keyframes appear
@keyframes appear {
from {
opacity: 0;
scale: 0.3;
}
to {
opacity: 1;
scale: 1;
}
}
.Container
.container {
animation: appear 3s linear;
}
.Container 2
.container {
animation: appear linear;
animation-timeline: view();
animation-range: entry 0;
}
Oi, Estanislau! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.
Sua implementação das animações está muito legal! A utilização de @keyframes com opacity e scale já cria um efeito visual interessante. Um ponto que vale atenção é o uso do animation-timeline e animation-range, que são recursos experimentais e podem não ter suporte completo em todos os navegadores ainda.
Uma dica interessante para o futuro é explorar o transform em vez de scale direto no keyframe. Por exemplo:
@keyframes aparecer {
from {
opacity: 0;
transform: scale(0.3);
}
to {
opacity: 1;
transform: scale(1);
}
}
Esse código usa transform, que é mais compatível com navegadores atuais para efeitos de escala.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!