Simple CSS Water Animation

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.

Table of Contents

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

Check Demo

Video Tutorial

Watch video tutorial on Simple CSS Water Animation.

Tags