scss Анимацияпульсациидляформы$ b $bИдляформыдобавляемперспективу，чтобы3Dбыло

Posted 2021-05-18

.form {
  &__animating {
    perspective: 800px;
  }
  &__required {
    color: red;
  }
  &__message {
    resize: none;
    min-height: 200px;
  }
  &__error {
    animation-duration: .4s;
    animation-timing-function: ease-in-out;
    animation-name: error-pulse;
  }
}

@keyframes error-pulse {
    0%{
      transform:translateX(0)
    }
    12.5%{
      transform:translateX(-6px) rotateY(-5deg)
    }
    37.5%{
      transform:translateX(5px) rotateY(4deg)
    }
    62.5%{
      transform:translateX(-3px) rotateY(-2deg)
    }
    87.5%{
      transform:translateX(2px) rotateY(1deg)
    }
    to
    {
      transform:translateX(0)}
}