Как управлять css анимацией в зависимости от html элементов списка

Question

Ниже указано значение css, которое воспроизводит анимацию наполнения чашки. Я пытаюсь добиться изменения уровня воды в чашке в зависимости от количества элементов списка в неупорядоченном списке html, например, чем больше элементов списка, тем больше заполнена чашка, но я не уверен, как это сделать. go об этом.

.cup {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 180px;
    border: 6px solid #262626;
    border-top: 2px solid transparent;
    border-radius: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url(https://i.imgur.com/kbpChd4.png);
    background-repeat: repeat-x;
    animation: animate 10s linear infinite;
    box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}

    .cup:before {
        content: '';
        position: absolute;
        width: 50px;
        height: 80px;
        border: 6px solid #fff;
        right: -57px;
        top: 30px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
    }

@keyframes animate {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px -10px;
    }

    80% {
        background-position: 1000px -20px;
    }

    100% {
        background-position: 2500px 100px;
    }
}

<div class="cup">
</div>

<ul id="list">
<li>Item1</li>
</ul>

Answer 1

Измените положение уровня анимированной заливки в css на определенные классы, а затем назначьте или измените эти классы с помощью JQUERY.

Я создал для вас скрипку, которая показывает 2 чашки.

.cup {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 180px;
    border: 6px solid #262626;
    border-top: 2px solid transparent;
    border-radius: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url(https://i.imgur.com/kbpChd4.png);
    background-repeat: repeat-x;
    animation: animate 10s linear infinite;
    box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup.two {
    top: 50%;
    right: 10%;
    animation: half 10s linear infinite;
}



    .cup:before {
        content: '';
        position: absolute;
        width: 50px;
        height: 80px;
        border: 6px solid #fff;
        right: -57px;
        top: 30px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
    }

@keyframes animate {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px -10px;
    }

    80% {
        background-position: 1000px -20px;
    }

    100% {
        background-position: 2500px 100px;
    }
}

@keyframes half {
    0% {
        background-position: 0 100px;
    }

    10% {
        background-position: 0 100px;
    }

    40% {
        background-position: 1000px 70px;
    }

    80% {
        background-position: 1000px 80px;
    }
    100% {
        background-position: 2500px 90px;
    }

}

HTML ЗДЕСЬ:

<ul>
<li>Item1</li>
</ul>
<div class="cup"></div>
<div class="cup two"></div>