Simple CSS Water Animation

In this tutorial we will see how to create Simple CSS Water Animation. We have used CSS animation property, height property, border property, position property and CSS keyframes.

HTML Code

HTML Code is given below.

<div class="jar">
</div>

CSS Code

CSS Code is given below.

body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #a5ff38;
}
.jar
{
    width: 200px;
    height: 350px;
    position: relative;
    background-image: url('jar.png');
    background-size: cover;
    background-position: center;
}
.jar::before
{
    position: absolute;
    content: '';
    height: 45px;
    width: 158px;
    bottom: 17px;
    left: 27px;
    background-color: aqua;
    z-index: -1;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    animation: water 5s;
    animation-fill-mode: forwards;
}
@keyframes water
{
    from
    {
      height: 45px;  
    }
    to
    {
      height: 200px;  
    }
}

Demo

Video Tutorial

Watch video tutorial on Simple CSS Water Animation.