<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;}
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css
  2. https://fonts.googleapis.com/css?family=Anton

External JavaScript

This Pen doesn't use any external JavaScript resources.