CSS3 rotation when hover a font awesome icon?

Question

What is the right css to make a css3 rotation when hover a font awesome icon.

I have this code to show a Fontawesome icon

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

Then I have this css to animate the icon

.fa-stack:hover{
color: red;
transition: 0.9s;
transform: rotateY(180deg);
}

The problem is that the animation is not done in a smothly movement and it returns to normal state even if the pointer is inside the icon. It seems to me that the problem are the <i> elements inside .fa-stack

I don't know how to show this in Fiddle.

You can view it in JS Bin: http://jsbin.com/wohubuwaliho/1/

Answer 1

This behavior happens because you hover the element that is animated. When the rotation is happening, the element which your mouse is hover change it's size. Consequence: for a short time the cursor is no more in the hover position. (to see by yourself, set a colored border to the icon and hover it). This follow to a reset of the event if the mouse doesn't stay perfectly immobile...

To avoid this, set your icon in a container and do the animation when the container is hovered.

HTML/CSS

.wrapper:hover .fa-stack{
    color: red;
    transition: 0.9s;
    transform: rotateY(180deg);
}
.wrapper{
    display: inline-block;
    width: 200px;
    border: 1px solid red;
    overflow: hidden;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span></div>