https://github.com/diego64/formulario-animado-com-js-puro-e-css-animation

https://github.com/diego64/formulario-animado-com-js-puro-e-css-animation

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/diego64/formulario-animado-com-js-puro-e-css-animation
• Owner: diego64
• Created: 2020-01-01T20:46:17.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-01-01T20:55:12.000Z (about 5 years ago)
• Last Synced: 2024-11-08T08:11:04.315Z (about 2 months ago)
• Language: CSS
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Formulário animado com JS puro e CSS Animation

## Atividades realizadas 

- [x] Fazer o formulário aparecer, suavemente, quando a página abrir 

- [x] Fazer os campos aparecem da esquerda pra direita, suavizando a entrada e fazendo-os entrar em momentos distintos

- [x] Quando clicar em Login, fazer o formulário sair da tela, indo para baixo

- [x] Remover formulário do html e não mostrar rolagem enquanto o formulário está saindo da tela

- [x] Adicionar um efeito diferente de timing para a saída do formulário

- [x] Fazer o formulário dizer não-não (vibrar) caso haja campos vazios.

- [x] 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.

## Animation

8 propriedades:

- 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;