为什么灌装杯子的 css animation 与交互作用

Question

Here I just want to fill the cup by 'bear'. So I thought that I just can change background image and imitate the filling process. But how you see background runs right or left and I don't know why. If you have a solution or another better way please help me.

This is html

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

So to see all animation please run snipper on full page. Thanks

Answer 1

The problem is that your Bar-Loader.png image is a different size than the Loader.png and when you set the background-position in the animation it gets animated. I think that the ideal solution would be having the two images of the same size so you don't have to change the position according to the Loader border size.

Anyway a little workaround (i know it's not perfect) could be using background-size: contain so the Bar-Loader.png gets a little bit stretched to fit the other image.

 * { 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% { background: url('https://i.ibb.co/7bK4D36/Vector-1.png'); background-repeat: no-repeat; background-size: contain; background-position: bottom; } 100% { background: url('https://i.ibb.co/74yw3Fh/Bar-Loader.png'); background-repeat: no-repeat; background-size: contain; background-position: bottom; } }

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

I tried to keep it as simple as possible with a transition with only one breakpoint

Answer 2

I would consider another png file that I will be using as mask to make the animation easier where you can consider a gradient:

 .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">