@keyframes water {
    0% {
        background-image: url('/public/images/water/1.png');
    }

    25% {
        background-image: url('/public/images/water/2.png');
    }

    50% {
        background-image: url('/public/images/water/3.png');
    }

    75% {
        background-image: url('/public/images/water/2.png');
    }
}

@keyframes empty {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes caught {
    0% {
        -webkit-transform: scale(0) rotate(360deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1) rotate(-360deg);
        opacity: 1;
    }
}

@keyframes hit {
    0% {
        background-color: rgba(0, 102, 143, 1);
        border-radius: 50%;
        height: 30%;
        width: 30%;
    }

    100% {
        height: 100%;
        width: 100%;
        background-color: transparent;
    }
}


.lake-cell {
    animation: water 2s infinite;
}