Good day. I want to implement a block appearance animation when clicked. Click on the button and the block is opened with a circular animation, thereby filling the entire screen from the upper left corner (where the button itself is located). If I break the animation into stages, I see it like this:
- The block is hidden (width and height are 0). Because it should be round; the default border-radius is 50%.
- We click on the button, the block begins to "grow."
- Fills the entire screen so that the round edges go off the screen.
The question is: How to make the content in this block center in relation to the edges of the screen, and not the edges of the block, since the block goes far beyond the screen.
Sketched the first option, but I think it can be easier. Example (button in the upper left corner).
