why css animation of filling a cup works with interaption

user_11738462 0
Viewed 174

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

css-animations css html
2 Answers

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

user_114687570

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

user_86203330
Related