Font-awesome hover seems have a delay

Question

I am trying to achieve hover animation with font-awesome fa icon-circle.

Problem is "Facebook circle" animation seems comes with delay. How can i achieve faster light on animation without giving smaller number of animation time with transitions.

HTML

<ul class="social-icons">
  <li>
    <a href="#www.facebook.com/mobge">
      <span class="fa-stack fa-3x socialSpan">
        
        <i class="fa fa-circle fa-stack-2x circleIco">
        </i>
        <i class="fa fa-facebook fa-stack-1x secondIco">
        </i>
        
      </span>
    </a>
  </li>
  [...]
</ul>

SCSS

.socialSpan, .circleIco, .secondIco{
    -webkit-transition:all 0.4s; /* For Safari 3.1 to 6.0 */
    transition:all 0.4s;
}
.social-icons{
    li{
        a{
            color: $sublimeGray;
        }
        a:hover{
            color: $facebookColor;
            margin-top: 20px;

        }
    }
    
}

Example: http://codepen.io/anon/pen/zaBxE/

Thank you.

Answer 1

You apply a CSS transition to two extra elements here, which may slow the transition.

It concerns socialSpan's children so remove the transitions applied to:

.socialSpan {
    transition:all 0.4s;
}

instead of

.socialSpan, .circleIco, .secondIco{
    transition:all 0.4s;
}

Demonstration!