Increase div height with animation using CSS

Navigation
4

I have this code that creates a wine glass with CSS: 

body{
   background: #000;  
}
.wrap {
  width: 100px; 
  margin: 0 auto;
  position: relative;
}
.glass{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 0px 0px 50% 50%;
  padding-top: 50px;
  box-sizing: border-box;
  background-color: rgba(0,222,255, 0.3);
}

.liquid{
  width: 100px;
  bottom: 96px;
  left: 0;
  position: absolute;
  height: 50px;
  border-radius: 0px 0px 100px 100px;
  display:block;
  z-index: -1;
  background-color: rgba(255,0,0, 0.5);
}

.stem {
  margin: 0 auto;
  height: 75px;
  width: 10px;
  background-color: rgba(0,222,255, 0.3);
  border-bottom: 2px solid rgb(0,155.4,178.5) ;
  border-radius: 0px 0px 5px 5px;
}
.base {
  margin: 0 auto;
  margin-top: -6px;
  width: 100px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(0,222,255, 0.3);
}
<div class="wrap">
  <div class="glass"></div>
  <div class="liquid"></div>
  <div class="stem"></div>
  <div class="base"></div>
</div>

The part that simulates the liquid in the cup is div .liquid that has height of 50px .

How would I make this height from 50px to 100px, animated and take 4 seconds, once the page is opened, using only CSS?

I tried to do with .animate of jQuery but it gets stuck because of other functions running at the same time.

    
asked by anonymous 02.06.2018 / 21:39

2 answers

1

Just an idea from what you have already done, of course, can be improved: 

body{
   background: #000;  
}
.wrap {
  overflow: hidden;
  width: 100px; 
  margin: 0 auto;
  position: relative;
}
.glass{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 0px 0px 50% 50%;
  padding-top: 50px;
  box-sizing: border-box;
  background-color: rgba(0,222,255, 0.3);
}

.liquidcontainner{
  width: 100px;
  height: 100px;
  border-radius: 0px 0px 100px 100px;
  bottom: 96px;
  left: 0;
  position: absolute;
  overflow: hidden;
  display:block;
  z-index: -1;
}

.derramar {
  left: 60%;
  border-radius: 0 50px 0 50px;
  width: 10px;
  height: 100px;
  position: absolute;
  display:block;
  z-index: -1;
  background-color: rgba(255,0,0, 0.5);
  animation-name: derramar;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  transform: skewY(-50deg);
}

.liquid{
  width: 100px;
  bottom: 0;
  left: 0;
  position: absolute;
  display:block;
  z-index: -1;
  background-color: rgba(255,0,0, 0.5);
  animation-name: liq;
  animation-duration: 4s; /* 4 segundos */
  animation-fill-mode: forwards; /* faz parar no final */
}

@keyframes liq {
    0% {
      height: 0px;
      transform: rotate(0deg); 
    }
    25% {
      height: 15px;
      transform: rotate(5deg); 
    }
    50% {
      height: 30px;
      transform: rotate(-5deg); 
    }
    75% {
      height: 45px;
      transform: rotate(5deg); 
    }
    100% {
      height: 60px;
      transform: rotate(0deg); 
    }
}

@keyframes derramar {
    0% {
      height: 100px;
      transform: rotate(0deg); 
    }
    25% {
      height: 85px;
      transform: rotate(5deg); 
    }
    50% {
      height: 70px;
      transform: rotate(-5deg); 
    }
    75% {
      top: 0px;
      height: 55px;
      transform: rotate(5deg); 
    }
    100% {
      top: 40px;
      height: 0px;
      transform: rotate(0deg); 
    }
}
.stem {
  margin: 0 auto;
  height: 75px;
  width: 10px;
  background-color: rgba(0,222,255, 0.3);
  border-bottom: 2px solid rgb(0,155.4,178.5) ;
  border-radius: 0px 0px 5px 5px;
}
.base {
  margin: 0 auto;
  margin-top: -6px;
  width: 100px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(0,222,255, 0.3);
}
<div class="wrap">
  <div class="glass"></div>
  <div class="liquidcontainner">
    <div class="derramar"></div>
    <div class="liquid"></div>
  </div>
  <div class="stem"></div>
  <div class="base"></div>
</div>
    
02.06.2018 / 23:55
3

I got with animation (suggested by @Valdeir Psr in the comments): 

body{
   background: #000;  
}
.wrap {
  width: 100px; 
  margin: 0 auto;
  position: relative;
}
.glass{
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 0px 0px 50% 50%;
  padding-top: 50px;
  box-sizing: border-box;
  background-color: rgba(0,222,255, 0.3);
}

.liquid{
  width: 100px;
  bottom: 96px;
  left: 0;
  position: absolute;
  height: 50px;
  border-radius: 0px 0px 100px 100px;
  display:block;
  z-index: -1;
  background-color: rgba(255,0,0, 0.5);
  animation-name: liq;
  animation-duration: 4s; /* 4 segundos */
  animation-fill-mode: forwards; /* faz parar no final */
}

@keyframes liq {
    from {height: 50px;}
    to {height: 100px;}
}

.stem {
  margin: 0 auto;
  height: 75px;
  width: 10px;
  background-color: rgba(0,222,255, 0.3);
  border-bottom: 2px solid rgb(0,155.4,178.5) ;
  border-radius: 0px 0px 5px 5px;
}
.base {
  margin: 0 auto;
  margin-top: -6px;
  width: 100px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(0,222,255, 0.3);
}
<div class="wrap">
  <div class="glass"></div>
  <div class="liquid"></div>
  <div class="stem"></div>
  <div class="base"></div>
</div>
    
02.06.2018 / 22:44
What is the difference between the expressions "int a" and "const int & a" as function arguments in C ++? How to only allow numbers at a prompt in javascript?