@keyframes shake {
    0%, 100% { transform: scale(1.1) translate(0, 0) rotate(0); }
    20% { transform: scale(1.12) translate(-5px, 0) rotate(-1deg); }
    40% { transform: scale(1.14) translate(5px, 0) rotate(1deg); }
    60% { transform: scale(1.16) translate(-5px, 0) rotate(0); }
    80% { transform: scale(1.18) translate(5px, 0) rotate(-1deg); }
}

@keyframes simplePingPong {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes pingPong {
    0% {
        background-position: top left;
    }
    20% {
        background-position: center;
    }
    40% {
        background-position: bottom right;
    }
    50% {
        background-position: center;
    }
    60% {
        background-position: top right;
    }
    80% {
        background-position: bottom left;
    }
    100% {
        background-position: top left;
    }
}

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

@keyframes zoomOut {
    0% {
        background-size: 200%;
    }
    100% {
        background-size: 100%;
        background-position: center center;
    }
}

@keyframes zoomOutAndroid {
    0% {
        background-size: 200%;
    }
    100% {
        background-size: 100%;
        background-position: center center;
    }
}

@keyframes zoomOutIOS {
    0% {
        background-size: 200%;
    }
    100% {
        background-size: 100%;
        background-position: top center;
    }
}

@keyframes randomPingPong {
    0% {
        background-size: 220%;
        background-position: top left;
    }
    20% {
        background-size: 230%;
        background-position: center;
    }
    40% {
        background-size: 200%;
        background-position: bottom right;
    }
    50% {
        background-size: 150%;
        background-position: center;
    }
    60% {
        background-size: 200%;
        background-position: top right;
    }
    80% {
        background-size: 230%;
        background-position: bottom left;
    }
    100% {
        background-size: 220%;
        background-position: top left;
    }
}


/* Animación de desvanecimiento para el mensaje */
@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Animación de rebote */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
} 



/* Spinner rotation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Rainbow color change */
@keyframes rainbow {
    0% { border-top-color: red; }
    16% { border-top-color: orange; }
    33% { border-top-color: yellow; }
    50% { border-top-color: green; }
    66% { border-top-color: blue; }
    83% { border-top-color: indigo; }
    100% { border-top-color: violet; }
}