Opa Nathan.
Primeiramente gostaria de pedir desculpas pela falta de abordagem de uma parte do código referente ao movimento da praia na aula ("2.5s ease-in-out forwards 1;" ). Reconheço que isso pode ter causado confusão e inconveniência. Agradeço desde já pela sua compreensão e encaminharei o problema para a equipe responsável.
Analisando seu código pude perceber alguns empecilhos para conseguirmos chegar ao resultado esperado dentro do arquivo praia-caiaques.svg
:
- Na nossa tag
svg
, precisamos adicionar o id “praia” para indicar a animação da imagem:
<svg id="praia”
- Além disso, é necessário adicionar as seguintes linhas de código referentes a animação dos objetos indo de cima para baixo:
#praia {
animation: inicia-pagina 2.5s ease-in-out forwards 1;
}
@keyframes inicia-pagina {
from {
transform: translate(0, -2000px)
}
}
Fico à disposição.
Tenha um bom dia e bons estudos.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓