Keep rotating CSS animation level - html

Question

I have this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
But I want something like this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
#keyframes translate {
from {top: 10px;}
to {top: 0px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
EDIT: I probably didn't explain this well enough. What I meant is, is there a way to keep the bottom of the div touching the line witout using any sort of animation to move it up and down? I want it to be dynamic, so that if I change the value of the rotation, I won't have to calculate and change the value of the translation.
EDIT2: Simply put: I just want the div to do what the second example is doing without needing a specific value for the vertical movement.

Answer 1

You should play with values to get it perfect but this is the idea:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
0% {transform: rotate(-30deg); top: 10px;}
50% {top: 0px;}
100% {transform: rotate(30deg); top: 10px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>

Answer 2

I'm not sure that this is what do you expect, but I will give it a try.
* {
margin: 0;
padding: 0;
}
div {
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}
hr {
position: absolute;
top: 99px;
width: 99%;
}
#keyframes rotate {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
#keyframes stretch {
0% {
height: 112px;
}
50% {
height: 100px;
}
100% {
height: 112px;
}
}
<div></div>
<hr>