CSS-transition flickering on hover

Question

awesome that you use your precious time to read my question!

I'm trying to flip a div on hover. All goes fine but it flickers during the transition. It almost looks like it's flipping multiple times! This ruins the whole effect of the flip. Here follows my code and a fiddle:

The fiddle: FIDDLE

And for the CSS:

.rotate {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding:20px;
    background-color: #333;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    font-family: sans-serif;
    color: #FFFFFF;
    border-top: #E9F01D 3px solid;
}
.rotate:hover {
    letter-spacing: 5px;
    color: #E9F01D;
    cursor: pointer;
    -ms-transform: rotatex(360deg);
    -webkit-transform: rotatex(360deg);
    transform: rotatex(360deg);
}

Is this flicker effect preventable or not? If so how do I do it?

Thanks in advance!

Answer 1

As mentioned in the comments:

The main trouble is: While hovering over a moving (or animated) div, you may just un-hover from the element because it moves beneath your cursor.

Solution: Place the hover-selector on a containing element which does not alter its size while you hover:

Example Here.

.rotate {
  width: 200px; height:80px;
  background:green;
}

.rotate .rotate-inner {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
          transition: all 0.3s;
  
  padding:20px;
  background-color: #333;
  text-align: center;
  margin: 0 auto;
  font-family: sans-serif;
  color: white;
  border-top: #E9F01D 3px solid;
}

.rotate:hover .rotate-inner {
  letter-spacing: 5px;
  color: #E9F01D;
  cursor: pointer;
  
  -webkit-transform: rotatex(360deg);
     -moz-transform: rotatex(360deg);
      -ms-transform: rotatex(360deg);
          transform: rotatex(360deg);
}

<div class="rotate">
    <div class="rotate-inner">HOVER ME</div>
</div>