css - 字体很棒的悬停似乎有延迟

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!