Create and animate a negative height div?-CodePudding

Building a special curve, I have a square element div that need to be fixed to it's bottom line while height will be changed(using animation) from the top:

I was trying to set negative height, and position the div on the y of the purple line, but that didn't work.

If I just add a normal div with a y offset, I can't animate it from top.

How to setup this div so I can easily animate its height to move as in the picture?

btw - this div must be absolute positioned.

CodePudding user response：

Here is an example position: absolute and bottom: 0 is what keeps it at the bottom and then you can just make height change with @keyframes.

.container {
  width: 400px;
  height: 350px;
  border-bottom: 2px solid black;
  
  position: relative;
}

.animated {
  width: 100px;
  height: 200px;
  border: 2px solid black;
  
 position: absolute;
 left: 50%;
 bottom: 0px;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 animation: grow 4s infinite;

}

@keyframes grow {
   0%   { height: 200px; }
   50%  { height: 0px; }
   100% { height: 200px; }
}

<div >
  <div ></div>
</div>

*EDIT Edit for the comment under so you can set css variable with javascript and then use that variable to set your height of the element and use same variable to set your animation.

/* sets height variable */
let myHeight = 100;
var r = document.querySelector(':root');
r.style.setProperty('--height', (myHeight   'px'));

  

.container {
  width: 300px;
  height: 300px;
  border-bottom: 2px solid black;
  position: relative;
}
#animated {
  width: 100px;
/* sets height to a height variable*/
  height: var(--height);
  border: 2px solid black;
 position: absolute;
 left: 30%;
/* sticks div to a bottom of parent conatainer*/
 bottom: 0;
 animation: grow 4s infinite;
transition: height 4s;
}


/*use calc to calculate start and end animation height*/
@keyframes grow {
  0% { height: calc(var(--height) - var(--height)); }
  50%{ height: var(--height); }
  100% { height: calc(var(--height) - var(--height)); }

}

<div >
  <div id="animated"></div>
</div>

You can set duration or whatever the same way. Hope this helps.

CodePudding user response：

This is a basic example of how you could lay out an absolutely positioned animation so that the bottom remains fixed in place.

As mentioned in the comments, the important part is the bottom: 0 (Or whatever fixed value works for your situation)

/* A wrapper component, the only important part here is the position relative */
.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border-bottom: 1px solid #000;
}

.animated {
  position: absolute;
  left: 10px;
  bottom: 0; /* This fixes the bar to the bottom of the wrapper element */
  width: 20px;
  height: 0;
  background-color: #f00;
  /* Some animation for demo purposes */
  animation-duration: 3s;
  animation-name: animate-height;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animate-height {
  from {
    height: 0px;
  }
  
  to {
    height: 100px;
  }
}

<div >
  <div ></div>
</div>