I've been experimenting for hours trying to achieve a sliding animation from the bottom to the top using just CSS. The goal is to create a test tube with fluid filling it. (Here is the desired outcome), but during the animation, the fluid overflows at the bottom edges and doesn't stay flush (like this).
Here is the HTML & CSS code snippet:
.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>