Я сделал простую svg-анимацию.Однако анимация изменения размера запаздывает, если воспроизводится.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 100% 100%">
<g>
<rect x="50%" y="100%" width="5%" height="15%" >
<animate id="ra1" attributeName="y" begin="0;ra4.end" dur="1" from="100%" to="40%" fill="freeze" />
<animate id="ra2" attributeName="height" begin="ra1.end" dur="0.5" by="50" fill="freeze" />
<animate id="ra3" attributeName="height" begin="ra2.end" dur="0.5" by="-50" fill="freeze" />
<animate id="ra4" attributeName="y" begin="ra3.end" dur="1" from="40%" to="100%" fill="freeze" />
</rect>
</g>
</svg>