Fill a cup with CSS animation

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- w w  w .  j  a  v  a2  s  .  com-->
   margin:0;
   background-color:Chartreuse;
   height:401px;
}

.glass {
   min-height:25em;
   display:flex;
   align-items:center;
   justify-content:center;
}

.beer {
   position:relative;
   width:121px;
   height:121px;
   box-shadow:inset 0 0 0 21px yellow;
}

.beer:before {
   content:"";
   position:absolute;
   border-style:solid;
   border-color:blue;
   border-width:0 16px 91px 0;
   left:31px;
   top:16px;
   box-shadow:-11px 0 0 11px pink;
}

.beer:after {
   content:"";
   position:absolute;
   border-style:solid;
   border-color:WhiteSmoke;
   border-width:0 0 91px 16px;
   right:31px;
   top:16px;
   box-shadow:11px 0 0 11px OrangeRed;
}

.filler {
   position:absolute;
   border-top:3px solid grey;
   z-index:-2;
   bottom:6px;
   width:100%;
   height:16%;
   background-color:BlueViolet;
   -webkit-animation:fill-it-up 6s linear infinite;
   animation:fill-it-up 6s linear infinite;
}

@-webkit-keyframes fill-it-up  {
   0% {
      border-top:3px solid Chartreuse;
      height:16%;
   }
   
   100% {
      border-top:16px solid yellow;
      height:71%;
   }

}

@keyframes fill-it-up  {
   0% {
      border-top:3px solid blue;
      height:16%;
   }
   
   100% {
      border-top:16px solid pink;
      height:71%;
   }

}
</style> 
 </head> 
 <body> 
  <div class="glass"> 
   <div class="beer"> 
    <div class="filler"></div> 
   </div> 
  </div>  
 </body>
</html>
Fill a cup with CSS animation - HTML CSS CSS

Description

Demo Code

Related Tutorials
