I recently came across a site with a nifty hamburger icon which transforms into an X icon when the menu is shown or it’s active. The transformation also includes a transition. So it’s not a simple background image change.
It really interests me so I recreate it in a codepen:
As you might have notice, here what happens, the top bar transforms 45 degree, the middle bar disappears, and lastly, the bottom bar transforms -45 degree.
The code is pure CSS so it’s very lightweight. It utilizes ‘transform’ and ‘transition’ css properties. You can add prefixes for browser support.