How to create a beautiful effect when the "pie" transitions to close?

Question

css

Hello friends.
Question: how are these ( https://codyhouse.co/demo/rounded-animated-navigat... - click on the menu) beautiful transition effects of "three stripes" into "cross" created. Where to dig? Where to read?

I will be glad to any hints. Thank you!

Answer 1

Just good, handmade animation. Everything works on CSS3.
Tools such as transform-origin, transform rotate, transform translate, transform skew, transition, animation, keyframes will help you.
For a natural look, just get inspired by this:
12 Disney Artists' Tricks to Bring Animation to Life Animation
Principles for the Web
Bringing Animation to Life

Answer 2

Base:
The three layers of the hamburger are drawn separately.
When activated, hide the middle one, and rotate the top and bottom ones by 45 degrees.