1

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

* {
    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.

1

1 ответ 1

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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.