How to make a block that smoothly appears out of nowhere and pushes the content away?

Question

css

Good afternoon, you need to make an error block that is hidden, when you remove the .error-hide class from it, it should appear from nowhere and push the content below. I can't figure out how to do it.
This is how it is closed

. And here it appears.

What styles are needed for such a transition?

Answer 1

If you want the block to expand from the center to the sides, you also need to animate the left and top styles