Css Chrome字体转换延迟

在导航栏内，由于CSS转换，我有FA图标转换效果的延迟：

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    transition: all 0.3s ease-out;
}

在以下时间后执行（在Chrome上）：

导航栏：

但是当向下滚动页面时，我需要使用

.navbar nav>li>a>p>I的转换来缩小FA图标的转换效果

JS:

CSS:

我没有Firefox或Edge的延迟问题

但这是因为Chrome首先执行.navbar nav>li>a的转换

，然后执行

.navbar nav>li>a>p>i的转换。

我们可以在Chrome上清楚地看到，这个叉子在第一次转换时有1.3秒：

---

有什么想法吗？谢谢。

如果我理解正确，您不必分别在文本和图标上创建动画，只需删除以下内容：

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    /*transition: all 0.3s ease-out;*/
}

我还缩短了你的动画持续时间，仅供参考

要保持字体缩放的动画效果，请使用以下命令：

transition: font-size 0.3s ease-out;

---

但如果我删除此过渡，则向下滚动时FA图标将不再设置动画，我希望它们设置动画。哦，是的，太完美了！谢谢：）你知道为什么上下滚动会有延迟吗：添加过渡：所有0.3s线性；到nav.navbarIndeed我可以看到它！：）

nav.shrink .navbar-nav > li > a > p > i {
    font-size: 1.1em;
}

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    /*transition: all 0.3s ease-out;*/
}

transition: font-size 0.3s ease-out;