Keep вращающаяся CSS анимационная

Question

У меня есть это:

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t from {transform: rotate(-30deg);} 
 
\t to {transform: rotate(30deg);} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

Но я хочу что-то вроде этого:

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t from {transform: rotate(-30deg);} 
 
\t to {transform: rotate(30deg);} 
 
} 
 

 
@keyframes translate { 
 
\t from {top: 10px;} 
 
\t to {top: 0px;} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

EDIT: Я, наверное, Бесполезный Объяснить это w достаточно. Я имел в виду, есть ли способ удерживать нижнюю часть div, касающуюся линии без использования какой-либо анимации, чтобы перемещать ее вверх и вниз? Я хочу, чтобы он был динамическим, так что, если я изменю значение вращения, мне не придется вычислять и изменять значение перевода.

EDIT2: Проще говоря: я просто хочу, чтобы div делал то, что делает второй пример, не требуя определенного значения для вертикального движения.

Answer 1

Вы должны играть со значениями, чтобы получить его совершенным, но это идея:

div { 
 
\t position: relative; 
 
\t width: 20px; 
 
\t height: 100px; 
 
\t border-radius: 10px; 
 
\t background: green; 
 
\t margin: 0 auto; 
 
\t transform-origin: 10px 10px; 
 
\t animation: rotate 1s ease-in-out infinite alternate; 
 
} 
 

 
@keyframes rotate { 
 
\t 0% {transform: rotate(-30deg); top: 10px;} 
 
\t 50% {top: 0px;} 
 
\t 100% {transform: rotate(30deg); top: 10px;} 
 
} 
 

 
hr { 
 
\t position: relative; 
 
\t top: -10px; 
 
}

<div></div> 
 
<hr>

Answer 2

Я не уверен, что это то, что вы ожидаете, но я дам попробуйте.

* { 
 
    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>