Create an Animated Hamburger using HTML5 and CSS3

[00:01] Let's start with an empty HTML template. I'll name this animated hamburger. We'll make a base container, and give it an ID of ham. We'll add three divisions, and give them a class of line, which represents the three lines of our hamburger.

[00:19] Now, let's start styling our hamburger. Let's add a few styles to our page. We'll add a style for the container and for each line. You can see that we have our three lines displayed in the page. The CSS for the container is straightforward.

[00:38] For each line, we've added a width of 40 pixel and a height of 5 pixel, and gave it a background of black, and a border radius of 2 pixel to make it slightly rounded. We've also given it a margin of 6 pixel to get the gap between each line.

[00:52] We'll add some interactivity to the hamburger on hover. Now, we'll take the hover event on the container using the CSS solo class, hover, and change the CSS property of each eye line.

[01:07] We'll change the background color to be teal, and then we'll add a transition property so that the change isn't abrupt, and it will happen over a period of time. We are using 04 seconds for the time, and easing out for the smoothing function.

[01:22] Now, if we refresh our page and hover on the hamburger, you can see that the background color seamlessly transitions to teal.

[01:34] We'll add a script to animate the hamburger on click. First, we'll get the container by referencing the ID ham. Then we'll hook into the onClick function of the division. Now, we'll toggle a class called clicked on our hamburger for each click. Now, we can animate each line whenever the container has the class clicked attached to it.

[02:16] We'll change the width of each line to be 32 pixel. If we go ahead and refresh the browser and click on the hamburger, you can notice that that width has changed. Click on it again, the width will divert back.

[02:31] Let's make it a bit more interesting by animating each line separately. We've added three classes -- line one, line two, line three -- for each line. Let's make a copy of this CSS for each line. We have changed the class names and our widths to 18 pixel, 24 pixel.

[02:54] Now, if we refresh our browser and test this, you can see that the animation looks much more smoother and nice.