/* APARECER ELEMENTO POR LA DERECHA */

@keyframes appearFromRight {
    from {
        transform: translateX(100px);
        filter: opacity(0);
    }
    to {
        transform: translateX(0);
        filter: opacity(1);
    }
}

.appearFromRight {
    animation: appearFromRight 3s;
}


/* APARECER ELEMENTO POR LA IZQUIERDA */

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

.appearFromLeft {
    animation: appearFromLeft 3s;
}


/* ANIMACIÓN PARA BURBUJA */

[class*="burbuja"] {
    animation: burbuje 10s infinite alternate, rotate_burbuje 60s infinite;
}

@keyframes burbuje {
    to {
        border-radius: 32% 68% 54% 46% / 27% 82% 18% 73%;
    }
}

@keyframes rotate_burbuje {
    to {
        transform: rotate(360deg);
    }
}