字体很棒的悬停似乎有一个延迟

Question

我正在尝试使用font-awesome fa icon-circle实现悬停动画。

问题是“Facebook圈子”动画似乎带有延迟。如何在动画中获得更快的光线而不会在过渡时提供更少的动画时间。

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;

        }
    }

}

示例：http://codepen.io/anon/pen/zaBxE/

谢谢。

Answer 1

您可以在此处将CSS转换应用于两个额外元素，这可能会减慢转换速度。

它关注socialSpan的孩子，因此删除应用于：

的过渡

.socialSpan {
    transition:all 0.4s;
}

而不是

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

Demonstration!