SCSSkeyframes.scss

.login-wrapper {
  // opacity: 0;
  width: 70%;
  height: 90%;
  display: inline-flex;
  flex-direction: column;
  margin: 4rem 0 0 0;
 
  // &:hover {
  //   transition: opacity 1s;
  //   opacity: 1;
  // }

  .login-inputs {
    color: #6c63ff;
    font-family: 'Roboto';
    font-size: 1.125rem;
    text-indent: 1.5rem;
    width: 28.125rem;
    height: 3.125rem;
    background-color: rgba(108, 99, 255, 0.15);

    outline: none;
    border: none;

    &::placeholder {
      color: #6c63ff;
      text-indent: 1.5rem;
    }

    &:focus {
      background-color: white;
      border: solid 0.8px #6c63ff;
    }
  }
}

.fade-in {
  // transition: opacity 1s;
  // opacity: 1;
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}