Increase div height with animation using CSS

Asked

Viewed 480 times

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 bowl is div .liquid who has the height of 50px.

How I would make this height go from 50px to 100px, in an animated way and take 4 seconds, once the page opens, using CSS only?

I tried to do with the .animate jQuery’s but keeps crashing because of other functions running at the same time.

css
  • 4

    Have you tried with animation or transition (CSS) or requestAnimationFrame (JS - suggestion due to the attempt with jQuery)?

  • I got it from Animation. VLW!

  • Puts an answer with the solution

  • @If you have an answer, put it there for us.

  • I don’t, but I was curious how it turned out :)

  • @Guilhermecostamilam posted response!

Show 1 more comment

2 answers

2

I got through 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>

  • 1

    Then say you don’t know CSS :p

  • rsrs... when it involves animations and other effects I’m weak mt.

  • So you seem to be doing well! []’s

  • This is wrong!! Right is right from {height: 100px;}&#xA; to {height:50px;}

  • @Leocaracciolo is the opposite rs

  • @dvd, so ok, you fill the cup (with good wine) and I empty.

  • @Leocaracciolo I’ll fill it with booze for you..

  • https://i.stack.Imgur.com/YA2HV.png

  • @Leocaracciolo greater lack of sacanaji rss

Show 4 more comments

1


Just an idea from which they have already made, which 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>

  • Poha! It got massive! It has to fill up to the top not?

  • I know how to do it. Thanks!

  • I edited adding a pour, just put the height that you want

  • It was cool, but I’ll show you how it is appearing on iPhone. The wine is square and coming out of the glass.

  • Check it out: https://i.stack.Imgur.com/Vzmng.jpg But my iPhone is from the old ones, iOS 6

  • How strange, the overflow is not working, may have to use a Webkit

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.