Почему css анимация наполнения стакана работает с перебоями

Question

Здесь я просто хочу наполнить чашу пивом. Вот я и подумал, что могу просто изменить фоновое изображение и имитировать процесс наполнения.
Но как вы видите, что фон движется вправо или влево, и я не знаю почему.
Если у вас есть решение или другой способ получше, пожалуйста, помогите мне.

* {
    box-sizing: border-box;
}

.container {
    padding: 5em;
    background: #1B3D6E;
    text-align: center;
}

.load {
    animation-name: loading;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}
@keyframes loading {
    0% {
        
        
    }
    20% {
        background: url('https://i.ibb.co/7bK4D36/Vector-1.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: bottom;
    }


    50% {
        background: url('https://i.ibb.co/74yw3Fh/Bar-Loader.png');
        background-repeat: no-repeat;
        
    }

    70% {
        background: url('https://i.ibb.co/74yw3Fh/Bar-Loader.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: 4px 5px;
        
    }

    90% {
        background: url('https://i.ibb.co/74yw3Fh/Bar-Loader.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: 4px 5px;
        
    }

    100% {
        background: url('https://i.ibb.co/74yw3Fh/Bar-Loader.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: 4px 5px;
        
    }
}

<div class="container">
       <img class="load" src="https://i.ibb.co/mbpyFZ2/Loader.png" width="48" height="90"  alt="Loading...">
</div>

Чтобы увидеть всю анимацию, запустите сниппет на всю страницу.

_{Свободный перевод вопроса why css animation of filling a cup works with interaption от участника @Babken Asryan.}

Answer 1

Я бы подумал о другом файле png, который я буду использовать в качестве маски, чтобы упростить анимацию, где вы можете рассмотреть градиент:

.container {
  padding: 5em;
  background: #1B3D6E;
  text-align: center;
}

.load {
  animation: loading 4s infinite;
  background:
   linear-gradient(orange 0 0) /* coloration */
   bottom/ /* position */
   100% 0%  /* width=100% height=0% */
   no-repeat;
  -webkit-mask: url(https://i.ibb.co/nkQm9Zb/Loader.png) center/contain no-repeat;
          mask: url(https://i.ibb.co/nkQm9Zb/Loader.png) center/contain no-repeat;
}

@keyframes loading {
  to {
    background-size:100% 100% /* width=100% height=100% */
  }
}

<div class="container">
  <img class="load" src="https://i.ibb.co/mbpyFZ2/Loader.png" width="48" height="90" alt="Loading...">
</div>

below the mask<br>
<img src="https://i.ibb.co/nkQm9Zb/Loader.png" style="background:#000;border:5px solid #000">

_{Свободный перевод ответа от участника @иTemani Afif.}

БЛОГ НА HUSL

Почему css анимация наполнения стакана работает с перебоями

Ответы (1 шт):