How to have a sliding animation from the bottom to the top with CSS?

I’ve spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It’s supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn’t sit flush (like this).

HTML & CSS:

.testTube #border {
  width: 40px;
  height: 150px;
  margin-top: 15px;
  background-color: white;
  border: 2px solid black;
  border-radius: 5px 5px 25px 25px;
  position: absolute;
}

.testTube #fluidLeft {
  width: 20px;
  height: 100px;
  margin-left: 2px;
  background-color: #ff007f;
  border-radius: 0% 0% 0% 25px;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.testTube #fluidRight {
  width: 20px;
  height: 0px;
  margin-left: 22px;
  background-color: #ff1a8c;
  border-radius: 0% 0% 25px 0%;
  position: absolute;
  animation-name: fluid;
  animation-direction: normal;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fluid {
  from {
    height: 0px;
    margin-top: 167px;
  }
  to {
    height: 100px;
    margin-top: 67px;
  }
}
<div class="testTube">
  <div id="border"></div>
  <div id="fluidLeft"></div>
  <div id="fluidRight"></div>
</div>

Go to Source
Author: Steven Jamieson