How do i play then repeat a css animation?

Question

<div id="div"></div>
#div{
width:10px;
height:10px;
animation:example 2s ease-in 0s 1 normal;}
@keyframes example{
from{height:10px;}
to{height:100px;}}
how do i make this animation play once then repeat once in "reverse" direction with js?

Answer 1

replace "normal" in animation with "infinite". no js needed.

this is how you do reverse:
@keyframes example {
0%,100%{ height:0 0 10px ; }
50%{ height:0 0 100px ; }
}

Answer 2

https://code.sololearn.com/WKmH8CbQhMx9/?ref=app

Answer 3

infinite