字体真棒悬停似乎有延迟

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!