How to control css animation dependent on html list items

Question

Below is some css which plays a cup filling animation. What I am trying to achieve is to have the water level change in the cup based on the number of list items in an unordered html list so for example the more list items the more filled the cup is, but I am unsure how to go about this.

.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

Change the position of animated fill level in your css to certain classes and then assign or change those classes with JQUERY.

I have created a fiddle for you that shows 2 cups.

.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 IS HERE:

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