.animar {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--animacion-duracion, .8s);
  transition-timing-function: var(--animacion-curva, ease);
  transition-delay: var(--animacion-delay, 0s);
}

.animar.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.fade {
  transform: scale(.98);
}

.desde-izquierda {
  transform: translateX(-70px);
}

.desde-derecha {
  transform: translateX(70px);
}

.desde-arriba {
  transform: translateY(-70px);
}

.desde-abajo {
  transform: translateY(70px);
}

.zoom {
  transform: scale(.86);
}

.delay-1 {
  --animacion-delay: .12s;
}

.delay-2 {
  --animacion-delay: .24s;
}

.delay-3 {
  --animacion-delay: .36s;
}

.delay-4 {
  --animacion-delay: .48s;
}