style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
}

body {
  background-color: black;
  font-family: Roboto, Arial, sans-serif;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 32px;
  letter-spacing: 1px;
  margin: 20px 0;
  color: rgb(247, 247, 75);
}

form {
  margin: 20px 0;
  background-color: rgb(247, 247, 75);
  padding: 30px 25px;
  border-radius: 5px;
}

form .input-block {
  margin-bottom: 20px;
}

form .input-block label {
  font-size: 14px;
  color: black;
}

form .input-block input {
  width: 100%;
  display: block;
  margin-top: 8px;
  padding: 7px;
  font-size: 16px;
  color: rgb(0, 0, 0);
  border-radius: 2px;
  border: 1px solid rgb(233, 233, 62);
  outline-color: rgb(247, 247, 75);
}

form .btn-login {
  display: block;
  min-width: 120px;
  border: none;
  background-color: black;
  color: rgb(247, 247, 75);
  border-radius: 25px;
  margin: auto;
  padding: 7px;
}


/******************** APARACIÇÃO DO FORM **********************/

form{
  animation-name: fade;
  animation-duration: 0.2s;
  overflow: hidden;
}

@keyframes fade{
  from{
    opacity: 0;
    transform: scale(0.9);
  } to {
    opacity: 1;
    transform: scale(1);
  }
}

/******** CAMPOS DA ESQUERDA PARA A DIREITA ********/

form .input-block:nth-child(1){
  animation-name: move;
  animation-duration: 500ms;
}

form .input-block:nth-child(2){
  animation-name: move;
  animation-duration: 400ms;
  animation-delay: 150ms;
  animation-fill-mode: backwards;
}

form .btn-login{
  animation-name: move;
  animation-duration: 400ms;
  animation-delay: 250ms;
  animation-fill-mode: backwards;
}

@keyframes move{
  from{
    opacity: 0;
    transform: translate(-35%);
  } to {
    opacity: 1;
    transform: translate(0%);
  }
}

/******** SUMIR COM O FORM AO CLICAR EM LOGIN ********/

.form-hide{
  animation: move-down;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in; /* adicionando timing */
}

@keyframes move-down{
  from{
    transform: translateY(0);
  } to{
    transform: translateY(100vh);
  }
}

/**************** FORM NO-NO (VIBRANDO) **************/

form.validate-error{
  animation: no-no 200ms linear, fade paused;
  animation-iteration-count: 2;
}

@keyframes no-no{
 
  0%, 100%{
    transform: translateX(0);
  }
  35%{
    transform: translateX(-15%);
  }
  70%{
    transform: translateX(15%);
  }
}

/**************** ANIÃMAÇO DOS QUADRADOS ****************/

body{
  overflow: hidden;
}

.squares li{
  width: 40px;
  height: 40px;
  background-color: rgb(255, 255, 255, 0.15);
  display: block;
  position: absolute;
  bottom: -40px;
  animation: squares 1s infinite alternate;
}

@keyframes squares{
  form{
    opacity: 0;
    transform: translateY(0);
  }
  50%{
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-900px) rotate(960deg);
  }
}