[data-animar="true"]{
    opacity: 0;
}

.fade-in {
    animation: fadeInAnimation 1s ease-in-out forwards;
}

.slide-up {
    animation: slideUpAnimation 1s ease-in-out forwards;
}

.zoom-in {
    animation: zoomInAnimation 1s ease-in-out forwards;
}

.bounce {
    animation: bounce 1s ease-in-out forwards;
}

.flip {
    animation: flip 1s ease-in-out forwards;
}

.swing {
    animation: swing 1s ease-in-out forwards;
}

.shake {
    animation: shake 1s ease-in-out forwards;
}

.pulse {
    animation: pulse 1s ease-in-out forwards;
}

.flash {
    animation: flash 1s ease-in-out forwards;
}

.rubber-band {
    animation: rubberBand 1s ease-in-out forwards;
}

.wobble {
    animation: wobble 1s ease-in-out forwards;
}

.fade-out {
    animation: fadeOut 1s ease-in-out forwards;
}

.slide-down {
    animation: slideDown 1s ease-in-out forwards;
}

.zoom-out {
    animation: zoomOut 1s ease-in-out forwards;
}

.roll-in {
    animation: rollIn 1s ease-in-out forwards;
}

.light-speed-in {
    animation: lightSpeedIn 1s ease-in-out forwards;
}

.rotate-in {
    animation: rotateIn 1s ease-in-out forwards;
}

.slide-left {
    animation: slideInLeft 1s ease-in-out forwards;
}

.slide-right {
    animation: slideInRight 1s ease-in-out forwards;
}

.fade-down {
    animation: fadeInDown 1s ease-in-out forwards;
}

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

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

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

@keyframes rotateIn {
    from {
        transform: rotate(-360deg);
        opacity: 0;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    from {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
}

@keyframes rollIn {
    from {
        transform: translateX(-100%) rotate(-360deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

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

@keyframes slideUpAnimation {
    0% {
        transform: translateY(30%);
        opacity: 0; /* Agregado */
    }
    100% {
        transform: translate3d(0);
        opacity: 1; /* Agregado */
    }
}

@keyframes zoomInAnimation {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        opacity: 1; /* Consistencia en la propiedad */
    }
    40% {
        transform: translateY(-30px);
        opacity: 0.8; /* Ejemplo de variación */
    }
    60% {
        transform: translateY(-15px);
        opacity: 0.9; /* Ejemplo de variación */
    }
}

@keyframes flip {
    from {
        transform: rotateY(0deg);
        opacity: 0; /* Agregado */
    }
    to {
        transform: rotateY(360deg);
        opacity: 1; /* Agregado */
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
        opacity: 0.8; /* Ejemplo de variación */
    }
    40% {
        transform: rotate(-10deg);
        opacity: 0.8; /* Consistencia */
    }
    60% {
        transform: rotate(5deg);
        opacity: 0.9; /* Ejemplo de variación */
    }
    80% {
        transform: rotate(-5deg);
        opacity: 0.9; /* Consistencia */
    }
    100% {
        transform: rotate(0deg);
        opacity: 1; /* Asegurando finalización visible */
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
        opacity: 1; /* Consistencia en la propiedad */
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
        opacity: 0.8; /* Ejemplo de variación */
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
        opacity: 0.8; /* Consistencia */
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1; /* Asegurando inicio visible */
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8; /* Ejemplo de variación */
    }
    100% {
        transform: scale(1);
        opacity: 1; /* Asegurando finalización visible */
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1);
        opacity: 1; /* Asegurando inicio visible */
    }
    30% {
        transform: scaleX(1.25);
        opacity: 0.8; /* Ejemplo de variación */
    }
    40% {
        transform: scaleX(0.75);
        opacity: 0.8; /* Consistencia */
    }
    50% {
        transform: scaleX(1.15);
        opacity: 0.9; /* Ejemplo de variación */
    }
    65% {
        transform: scaleX(0.95);
        opacity: 0.9; /* Consistencia */
    }
    75% {
        transform: scaleX(1.05);
        opacity: 1; /* Ejemplo de finalización más visible */
    }
    100% {
        transform: scaleX(1);
        opacity: 1; /* Asegurando finalización visible */
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
        opacity: 1; /* Asegurando inicio visible */
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
        opacity: 0.9; /* Ejemplo de variación */
    }
    30% {
        transform: translateX(20%) rotate(3deg);
        opacity: 0.9; /* Consistencia */
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
        opacity: 0.8; /* Ejemplo de variación */
    }
    60% {
        transform: translateX(10%) rotate(2deg);
        opacity: 0.8; /* Consistencia */
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
        opacity: 0.9; /* Ejemplo de variación */
    }
    100% {
        transform: translateX(0%);
        opacity: 1; /* Asegurando finalización visible */
    }
}

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

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

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}