css - How to create a CSS3 animation that resembles an image fill up effect? -

many preloaders fill image bottom top this example.

how 1 create animation based off single image in css show fill effect? have tried following code produces image sliding effect , not fill effect.

by fill effect mean actual image fills frame (like water filling tank).

.frame {    position: relative;    height: 600px;    width: 300px;    overflow: hidden;    border: 1px solid;  }  .frame img {    position: absolute;    top: 100%;    animation: fill-up 3s ease infinite;  }  @keyframes fill-up {    {      top: 0px;    }  }

<div class='frame'>    <img src='http://buildinternet.com/live/imagefill/dude.jpg' />  </div>

note: images used in answer not own. taken build internet site.

creating image fill-up animation similar 1 available here (that uses jquery animation) possible using css3 animations. needs 2 containers image , height of 1 animated 0 full height.

the following how animation created:

• one parent container element height, width equal (or greater than) of image
• one second level container element positioned absolutely respect bottom of parent. initial height of element set 0 , animation on element produces fill-up effect.
• the image positioned absolutely respect bottom of top level container.
• the second level container has overflow: hidden other portions of image not show (they clipped). height of second level container animated, more , more of image become visible.

.container {    position: relative;    width: 300px;    height: 600px;  }  .frame {    position: absolute;    bottom: 0px;    left: 0px;    height: 0px;    width: 100%;    overflow: hidden;    animation: fill-up 3s ease infinite;    }  .frame img {    position: absolute;    bottom: 0px;  }  @keyframes fill-up {    {      height: 600px;    }  }

<div class='container'>    <div class='frame'>      <img src='http://buildinternet.com/live/imagefill/dude.jpg' />    </div>  </div>

---

as see above snippet, doesn't have frame visible before image starts fill frame. if needed in linked website tough achieve single image. need 2 different image elements, where, 1 frame fill transparent (so actual image positioned behind can show through) , other actual image. animation, need 1 second level container frame. below sample demo.

.container {    position: relative;    width: 300px;    height: 600px;  }  .frame {    position: absolute;    bottom: 0px;    left: 0px;    height: 100%;    width: 100%;  }  .frame:nth-child(2) {    bottom: 35px;    left: 10px;    height: 0px;    overflow: hidden;    z-index: -1;    animation: fill-up 3s ease infinite;  }  .frame:nth-child(2) img {    position: absolute;    bottom: 0px;  }  @keyframes fill-up {    {      height: 600px;    }  }

<div class='container'>    <div class='frame'>      <img src='http://buildinternet.com/live/imagefill/dudeframe.png' />    </div>    <div class='frame'>      <img src='http://buildinternet.com/live/imagefill/dude.jpg' />    </div>  </div>

---

the other thing see in linked website fill happens @ angle. if required skew transform should added second level container (the 1 has image , not frame). since transform added parent, image skewed. so, reverse transform should added img element make appear normal.

.container {    position: relative;    width: 300px;    height: 600px;  }  .frame {    position: absolute;    bottom: 0px;    left: 0px;    height: 100%;    width: 100%;  }  .frame:nth-child(2) {    bottom: 40px;    left: 10px;    height: 0px;    transform: skewy(-10deg);    transform-origin: right bottom;    overflow: hidden;    z-index: -1;    animation: fill-up 3s ease infinite;    }  .frame:nth-child(2) img {    position: absolute;    bottom: 22px;    transform: skewy(10deg);  }  @keyframes fill-up {    {      height: 600px;    }  }

<div class='container'>    <div class='frame'>      <img src='http://buildinternet.com/live/imagefill/dudeframe.png' />    </div>    <div class='frame'>      <img src='http://buildinternet.com/live/imagefill/dude.jpg' />    </div>  </div>

note: images used in answer not own. taken build internet site.