Formulário Animado CSS

🚀 Sobre o projeto

Este é um formulário animado desenvolvido utilizando HTML, CSS e Javascript.

Ele apresenta uma animação de quadrados que aparecem aleatoriamente na tela com intervalos de tempo, tamanhos e velocidades diferentes, além de animações para os campos e o botão assim que a página carrega. Também é feita uma verificação dos campos do formulário quando clicado em “Login”, caso exista um campo vazio é feita uma animação vibrando o formulário, mas se todos os campos estiverem preenchidos é feita outra animação de modo que o formulário desapareça da tela.

🎯Desafios

• Fazer o formulário aparecer, suavemente, quando a página abrir
• Fazer os campos aparecem da esquerda pra direita, suavizando a entrada e fazendo-os entrar em momentos distintos
• Quando clicar em Login, fazer o formulário sair da tela, indo para baixo
• Remover formulário do html e não mostrar rolagem enquanto o formulário está saindo da tela
• Adicionar um efeito diferente de timing para a saída do formulário
• Fazer o formulário dizer não-não (vibrar) caso haja campos vazios.
• Criar alguns quadrados animados (que fiquem girando) e que saem de baixo da tela (fora do campo de visão) e vão para cima da tela (que saia do campo de visão também). Detalhes: Deve ter tamanhos diferentes, sairem em momentos diferentes, terem timing diferente, animação contínua.

💻 Propriedades animation usadas:

• animation-name: animationname
• animation-duration: 2s
• animation-delay: 3s
• animation-fill-mode: none
• animation-play-state: running
• animation-timing-function: ease
• animation-direction: reverse
• animation-iteration-count: infinite

💡 Tela