.appear{
    /* animation: appear 4s forwards; */
    /* webkit se usa para que pueda ser legible en cualquier navegador */
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; /* ponemos both para que cumpla la animación de ida y regreso */
    -webkit-animation-name: appear;
    animation-name: appear;
}

@keyframes appear{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.downIn{
  /* animation: downIn 1s both; */
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; /* ponemos both para que cumpla la animación de ida y regreso */
  -webkit-animation-name: downIn;
  animation-name: downIn;
}

@keyframes downIn {
  from{
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
  to{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

.pulse {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


.UpIn{
  /* animation: downIn 1s both; */
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; /* ponemos both para que cumpla la animación de ida y regreso */
  -webkit-animation-name: UpIn;
  animation-name: UpIn;
}

@keyframes UpIn{
  from{
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  to{
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}