https://github.com/rodrigo-dev7/formulariojs
Formulário animado com JS puro e CSS Animation
https://github.com/rodrigo-dev7/formulariojs
css cssanimations formulary html javascript
Last synced: 25 days ago
JSON representation
Formulário animado com JS puro e CSS Animation
- Host: GitHub
- URL: https://github.com/rodrigo-dev7/formulariojs
- Owner: Rodrigo-dev7
- Created: 2020-03-20T23:05:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-20T23:19:36.000Z (about 5 years ago)
- Last Synced: 2025-02-08T08:32:39.771Z (3 months ago)
- Topics: css, cssanimations, formulary, html, javascript
- Language: CSS
- Homepage:
- Size: 7.81 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
## Desafios
- [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;
```css
@keyframes animationname {
0% {
}
100%{
}
}
```
podemos ter múltiplas animações no mesmo elemento
```css
.animate {
animation: slide-top 2s, bounce 1s, fade 0.2s;
}
```
## References
[Rocketseat](https://rocketseat.com.br/)
[CSS Animation Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
[Animation Timing Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
[Site para criar animações](http://animista.net/play/basic/scale-up)
[Site para criar cubic Bézier timming](https://matthewlein.com/tools/ceaser)