formularios_front/src/styles/sass/_animation.scss

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRotate {
  from {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes fadeInUpBounce {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px); // se pasa ligeramente hacia arriba
  }
  80% {
    transform: translateY(3px); // rebota hacia abajo
  }
  100% {
    transform: translateY(0); // posición final
  }
}

@keyframes fadeInDownBounce {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: translateY(5px); // se pasa un poco hacia abajo
  }
  80% {
    transform: translateY(-3px); // rebota hacia arriba
  }
  100% {
    transform: translateY(0); // se estabiliza
  }
}

// Clase base para aplicar la animación
.fade-in {
  animation: fadeIn 1s ease-in-out;
  animation-fill-mode: both;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
  animation-fill-mode: both;
}

.fade-in-down {
  animation: fadeInDown 0.8s ease-out;
  animation-fill-mode: both;
}

.fade-in-scale {
  animation: fadeInScale 0.8s ease-out;
  animation-fill-mode: both;
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
  animation-fill-mode: both;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
  animation-fill-mode: both;
}

.fade-in-rotate {
  animation: fadeInRotate 0.8s ease-out;
  animation-fill-mode: both;
}

.fade-in-up-bounce {
  animation: fadeInUpBounce 0.8s ease-out;
  animation-fill-mode: both;
}

.fade-in-down-bounce {
  animation: fadeInDownBounce 0.8s ease-out;
  animation-fill-mode: both;
}

// Variantes con delays más suaves
@for $i from 1 through 5 {
  .delay-#{$i} {
    animation-delay: #{($i * 0.3)}s;
  }
}