Transition HTML element from center in CSS3 - html

Question

I am trying to animate height property of an element using CSS but I want it from the center. Below is my code but it changes height from bottom.
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
#-webkit-keyframes height {
from {
height: 60px;
}
to {
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
Here is JSFIDDLE

Answer 1

You can use transform
from {
}
to {
transform: scaleY(0.1666);
}
0.1666 comes from 10px / 60px

Answer 2

Here you go. I use animation top instead of height. The red toggle also needs a 'container' now so I just used the one you had there. When changing the dimensions of the red toggle, change the outer wrapper, not the toggle element (it will fit to whatever the container is, both width and height wise)
https://jsfiddle.net/j2refncs/7/
.toggle {
width: 20px;
height: 40px;
background: #ccc;
position: relative;
.left-border {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s;
}
}
#-webkit-keyframes height {
from {
top: 0;
}
to {
top: 30px;
}
}

Answer 3

Just add top: 75px to the keyframe since the change in height is 50px. You want to reduce the height by 25px or half from both sides, top and bottom, to come to the desired 10px. So 50px / 2 + top: 50px = top: 75px:
.toggle {
position: absolute;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 50px; /* starting position from the top */
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #f00;
animation: height 2s;
}
#-webkit-keyframes height {
to {height: 10px; top: 75px} /* + ending position from the top */
}
<div class="toggle">
<div class="left-border"></div>
</div>

Answer 4

You can animate the top with the height to make the height change appear from the center:
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
top: 25px;
height: 60px;
}
to {
top: 50px;
height: 10px;
}
}
<div class="toggle">
<div class="left-border"></div>
</div>
You can also use transform: scaleY() in the animation. The default transform origin is the center.
.toggle {
position: relative;
width: 400px;
height: 200px;
background: #ccc;
}
.left-border {
position: absolute;
top: 25px;
left: 10px;
width: 20px;
height: 60px;
border-radius: 200px;
background-color: #ff0000;
animation: height 2s forwards;
}
#keyframes height {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0.167);
}
}
<div class="toggle">
<div class="left-border"></div>
</div>