Здесь я просто хочу наполнить чашу пивом. Вот я и подумал, что могу просто изменить фоновое изображение и имитировать процесс наполнения.
Но как вы видите, что фон движется вправо или влево, и я не знаю почему.
Если у вас есть решение или другой способ получше, пожалуйста, помогите мне.
* {
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.