CSS3 Menu Animation Flicker

Question

I've created a simple hamburger menu that transforms into a plus sign when the user hovers over it but there's an annoying flicker that occurs on hover. Is it possible to increase the hover region around the entire hamburger in CSS3 so that the flicker doesn't occur?

Here's the codepen link:
http://cdpn.io/LJHpe

Answer 1

As you likely know the flickering is due to the elements starting and stopping being hovered. There are several ways to fix this, the path I chose to do so is to make it one element instead of two (:

<span class="menu">MENU</span>

body {
  background:#EDDE45;
  position:relative;
  margin-left:50%;
  top:50px;
}
.menu {
  position:relative;
  top:50px;
  padding-top:3em;
  font-family: arial,verdana;
  font-size:18px;
  color:black;
  cursor:default;
}
.menu:before { /* The top two lines */
  content:'';
  position: absolute;
  left: -1em;
  top: 0;
  width: 5em;
  height: .5em;
  border-top:0.5em solid black;
  border-bottom:0.5em solid black;
  transition:transform 0.25s ease-in, border-bottom .2s;
}
.menu:after { /* The third line */
  content:'';
  position: absolute;
  left:-1em;
  top:2em;
  width:5em;
  height:0.5em;
  background:black;
  transition:all 0.25s ease-in;
}
.menu:hover {
  cursor:pointer;
}
.menu:hover:before {
  transform:scale(0.8);
  border-bottom:0.5em solid rgba(255,255,255,0);
}
.menu:hover:after {
  transform:scale(0.8) rotate(90deg);
  top:0em;
}

Demo

Let me know if you have any questions!