How to make css animation on element expansion?

Question

css

The essence is the following, you need to make sure that when you click the bottom block crawls out with animation. I don't understand what exactly to add initial states to.

Answer 1

"display: none" take away. It blocks the animation.
And in property translate - it is necessary to specify units of measure.

transform: translateY(0);

- this will not work.