css - Animate background of transparent image

Question

I would like to create a bottom to top filling animation of a background color below an image with a transparent section, so, for example, I have the following image (assume grey is the transparent part):

and I would like to create an animation like this:

Essentially i'm trying to make the background of the image slide from bottom to top and I want for the fill amount to be dynamic (0-100% fill amount). My HTML has a format similar to this:

<div>
  <img width="100" height="100" src="../img.png" />
</div>

I can adjust the image and html layout to support the animation if needed.

Edit: to clarify, I'm going to use an image, what i meant is that i can customise the image itself, but it might be a new image later on and i prefer to make it robust to the given image (relying only on the transparency part).

Answer 1

If you don't have to use image, you can use pure css. Also fiddle is here .

 .star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background-color: grey; height: 280px; position: relative; } .star .inner { position: absolute; bottom: 0; height: 280px; width: 280px; background-color: red; animation: fill-star 2s; } .fill-container { background-color: yellow; height: 280px; width: 280px; } @keyframes fill-star { 0% { transform: translateY(100%) } 100% { transform: translateY(0) } } 

 <div class="fill-container"> <div class="star"> <div class="inner"> </div> </div> </div> 

Answer 2

Simply use gradient and animate background-size:

 .box { width:200px; height:200px; background: /*replace the radial-gradient with your image*/ radial-gradient(circle at center,transparent 50%,red 52%), /*this linear-gradient for the animation*/ linear-gradient(green,green) bottom, /*bottom layer*/ grey; background-size:auto,100% 0%; background-repeat:no-repeat; transition:2s; } .box:hover { background-size:auto,100% 100%; } 

 <div class="box"></div>