<div class="cup"></div>
body {
margin: 0;
padding: 0;
background: #262626;
}
.cup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 180px;
border: 6px solid #262626;
border-top: 2px solid transparent;
border-radius: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: url(https://image.ibb.co/fmHm66/wave.png);
background-position: 0px 350px;
background-repeat: repeat-x;
animation: filling 10s ease-in-out infinite;
box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup:before {
content: '';
position: absolute;
width: 50px;
height: 80px;
border: 6px solid #fff;
right: -57px;
top: 30px;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
}
@keyframes filling {
50% {background-position: 3000px 0px;}
100% {background-position: 6000px 350px;}
}
This Pen doesn't use any external JavaScript resources.