.principal{
    animation: animation-left 2s ease-out forwards ;
    -webkit-animation: animation-left 2s ease-out forwards ;
}
.formulario{
    animation: animation-down 2s ease-out ;
    -webkit-animation: animation-down 2s ease-out ;
}

/* Keyframes */
@keyframes animation-down {
    from {
      top: -100%;
    }
    to {
      top: 0;
    }
  }
  
  @keyframes animation-left {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }
  
  @keyframes animation-right {
    from {
      right: -100%;
    }
    to {
      right: 0;
    }
  }
  
  /* Animaciones */
  .animation-down {
      animation: animation-down 2s ease-in-out forwards;
      -webkit-animation: animation-down 2s ease-in-out forwards;
}
  
  .animation-left {
      animation: animation-left 2s ease-in-out forwards;
      -webkit-animation: animation-left 2s ease-in-out forwards;
}
  
  .animation-right {
      animation: animation-right 2s ease-in-out  forwards;
      -webkit-animation: animation-right 2s ease-in-out  forwards;
}