Enhancing UX With CSS Animations

First we need our little hamburger icon. For this example, I'm not going to get deep into how the hamburger icon is built, since I'd like to focus on how the animation is achieved. However I'll provide the code and then show how we will go about animating the icon.

The code for the markup and styles of the hamburger icon are below:

HTML

<div class="nav-button">
  <div class="nav-burger"></div>
</div>


CSS

.nav-button {
  margin: 0 auto;
  width: 28px;
  height: 24px;
  padding-top: 9px;
  box-sizing: border-box;
}
.nav-burger {
  margin: 0 auto;
  width: 28px;
  height: 6px;
  background-color: #FFF;
  border-radius: 5px;
  position: relative;
}
.nav-burger:before, .nav-burger:after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background-color: #FFF;
  position: absolute;
  border-radius: 5px;
  transition: 0.5s;
}
.nav-burger:before {
  top: -9px;
}
.nav-burger:after {
  top: 9px;
}

And that'll give us this:

See the Pen VLEwRr by Clay Baucom (@clayb) on CodePen.

In the code above, the middle bar, or "patty" of the hamburger icon is formed from the styles for .nav-burger and the "hamburger buns" are created by adding the CSS psuedo-elements :before and :after to our <div class="nav-burger"></div>.

The :before and :after psuedo-elements are styled identically to the middle bar. They are then positioned above and below the middle line of the hamburger icon, which creates the three bars of the icon.

Once we have the hamburger icon, we then want to make it do something when the user clicks on it, so that it's more interactive. To alter the styling of the icon when the user clicks on the hamburger, like this, we will add a class .active to the <div class="nav-burger"></div> element, and remove the .active class when the hamburger icon is clicked again.

To accomplish this we use the jQuery .click() event handler to detect when the <div class="nav-button"></div> element is clicked, and then we use .toggleClass() to "toggle" on or off the .active class on the <div class="nav-burger"></div> element.

javscript/jQuery

$('.nav-button').click(function(){
  $('.nav-burger').toggleClass('active');
});

Using the CSS class .active, we can add the CSS styles that will achieve the effect. In this case, we are going to fade out the middle bar of the hamburger icon, while rotating the top and bottom bars of the icon until they cross, forming an "X" shape.

To make the middle bar disappear we set its CSS background-color property to transparent. However, we want to set the background-color property on the pseudo-elements to white (#FFF) to ensure that they don't disappear in the process.

Now we need to rotate the top bar by 45 degrees and simultaneously shift it 6px down and 6px to the right.

To do this we use a CSS transform like so: transform: rotate(45deg) translate(6px, 6px);. And we rotate the bottom bar by -45deg and shift it to the right by 7px and up by 7px like so: transform: rotate(-45deg) translate(7px, -7px);.

Putting that all together we get this:

CSS

.active {
  background-color: transparent;
}
.active:before {
  background-color: #FFF;
  transform: rotate(45deg) translate(6px, 6px);
}
.active:after {
  background-color: #FFF;
  transform: rotate(-45deg) translate(7px, -7px);
}

which results in this:

See the Pen navburger no transition demo by Clay Baucom (@clayb) on CodePen.

Click on the hamburger icon to view example.

In the above example, if you click the hamburger icon, you will see it change to the "X" shape, which is cool, but it's an instant change, so let's make it even cooler by using CSS transitions to animate the change. Funny enough, this is probably the simplest part of the whole thing!

In this example, all we need to do is add transition: 0.5s; to .nav-burger as well as to the :before and :after psuedo-elements, like so:

CSS

.nav-burger {
  width: 28px;
  height: 6px;
  background-color: #FFF;
  border-radius: 5px;
  transition: 0.5s;
  cursor: pointer;
  position: relative;
}
.nav-burger:before, .nav-burger:after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background-color: #FFF;
  position: absolute;
  border-radius: 5px;
  transition: 0.5s;
}

This basically tells the browser to animate the changing CSS properties within a timeframe of half a second.

Putting all the above code together we get:

HTML

<div class="nav-button">
  <div class="nav-burger"></div>
</div>


CSS

.nav-button {
  margin: 0 auto;
  width: 28px;
  height: 24px;
  padding-top: 9px;
  box-sizing: border-box;
  cursor: pointer;
}
.nav-burger {
  width: 28px;
  height: 6px;
  background-color: #FFF;
  border-radius: 5px;
  transition: 0.5s;
  cursor: pointer;
  position: relative;
}
.nav-burger:before, .nav-burger:after {
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background-color: #FFF;
  position: absolute;
  border-radius: 5px;
  transition: 0.5s;
}
.nav-burger:before {
  top: -9px;
}
.nav-burger:after {
  top: 9px;
}
.active {
  background-color: transparent;
}
.active:before {
  background-color: #FFF;
  transform: rotate(45deg) translate(6px, 6px);
}
.active:after {
  background-color: #FFF;
  transform: rotate(-45deg) translate(7px, -7px);
}


javscript/jQuery

$('.nav-button').click(function(){
  $('.nav-burger').toggleClass('active');
});

Which then produces this:

See the Pen navburger full animated demo by Clay Baucom (@clayb) on CodePen.

Click on the hamburger icon to view animation.

Now when you click on the hamburger icon in the example above, you'll see a smoothly animated transition from the hamburger shape to the "X" shape!

Note: One caveat to be aware of when using CSS transitions and CSS transforms is that that you need to use CSS vendor prefixes for cross-browser support. In the above interactive examples, I am using a tool called autoprefixer to add the prefixes when they are necessary, and to keep the code examples simplified.

For more info on CSS vendor prefixes check out this article from CSS-tricks.