blog

Enhancing UX With CSS Animations

Web animation has come a long way and, these days, with the ability to animate elements using CSS3, it's easier than ever to spice up the user experience with some CSS transitions, CSS transforms and CSS animations.

On our site you can see many cool animations, but one of my favorites is the animation that is used for the "hamburger" navigation menu icon.

Called a “hamburger” icon for its close resemblance to the classic dish.

(If you're reading this on a mobile device, you'll see the hamburger icon in the upper right corner of the page. If you're on a desktop you can resize your browser window to below 850px width, and you'll see the navigation menu will become the little hamburger).

As far as the animation goes, when a user clicks the hamburger icon, it appears to transform into an "X" while opening a navigation menu.

The animation serves to inform the user that they would now click on the "X" icon to close the navigation menu.

Here's how we accomplished this animation using CSS3 and just a touch of jQuery.

Click on each step below for your full tutorial.

Step 1:

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.

Step 2:

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.

Step 3:

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.

There is a whole world of possibilities when it comes to CSS animations alone, some easy and some not so easy. Nonetheless, I hope this fun tutorial has helped to illustrate the benefit of taking the to time to add CSS transitions and CSS transforms to give the user a more interesting and engaging experience on your website.

Clay Baucom

author

Clay Baucom

Like what you read? Check out this related post:

Sanky/AWF Case Study

read now