'How to animate a div to move from the top of a flexbox to the bottom

I have a container div that is a flexbox, Inside that flexbox I have three columns. I want to animate the cube shape from the top to the bottom. However, using translateY() it only moves the cube down the distance of itself and not the parent. How can I modify it so it moves to the bottom of the container?

div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
}

div div {
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  transform: translateY(100%);
}
<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">A cube</div>
</div>
javascripthtmlcsscss-animationscss-transitions


Solution 1:[1]

You could use a relative position and animate the top value:

div {
  position: relative;
  top: 0;
}
div:hover .cube {
  top: 75%;
}


div {
  display: flex;
  justify-content: space-between;
  text-align: center;
  transition: 350ms;
  font-size: x-large;
  position: relative;
  top: 0;
}

div div {
  color: black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: red;
}

.cube {
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-image: linear-gradient(black, gray, black);
}

div:hover .cube {
  top: 75%;
}
<div style="width:800px;height:800px;border: medium #999999 solid">
  <div class="cube">This is a cube</div>
  <div>This is a triangle</div>
  <div>This is a big, green circle</div>
</div>

Solution 2:[2]

In my solution, I have used the bottom and transform properties to get the desired result. I have explained the code wherever needed in the form of comments.

.container {
  width: 800px;
  height: 800px;
  border: medium #999999 solid;
  /* set the container position to relative */
  position: relative;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: x-large;
}

.container div {
  color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.cube {
  /* set the cube position to absolute */
  position: absolute;
  /* initially position the cube at the top  */
  bottom: 100%;
  /* move down the origin of the element by 100% of its height (so that it's visible on the screen)  */
  transform: translateY(100%);
  /* add a transition of 1s on both bottom and transform properties  */
  transition: bottom 1s, transform 1s;
  align-self: flex-start;
  width: 25%;
  height: 25%;
  background-color: black;
}

.container:hover .cube {
  /* on hover, move the element to the bottom of the container  */
  bottom: 0;
  /* set the origin to its original position  */
  transform: translateY(0%);
}
<!-- Added the class "container" -->
<div class="container">
  <div class="cube">This is a cube</div>
  <div>This is a triangle</div>
  <div>This is a big, green circle</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sean Stopnik
Solution 2 AlveMonke

Related Questions