CSS转换：Webkit浏览器中奇怪的不必要的延迟（Chrome和Safari）

Question

我希望有人能够帮助解释我在Webkit浏览器中遇到的奇怪行为，并在CSS转换中出现不必要的延迟。

这里是我工作的网页的链接：http://demo.daised.com/help-me

期望得到的结果是菜单栏缩小为用户向下滚动页面。这在Firefox中完美动画。

但是，在Webkit浏览器中，导航项的字体大小过渡延迟了6（！）秒。

感谢您帮助我更好地理解这一点。

Answer 1

user3360686是对的，你的转换是以某种方式堆叠的。我不确定它为什么会发生，因为它不应该。

您在插头来实现反正什么危险，并可能引发奇怪的行为：

header * { 
    transition: all 0.8s; 
    -moz-transition: all 0.8s; 
    -webkit-transition: all 0.8s; 
    -o-transition: all 0.8s; 

    transition-delay: 0.2s; 
    -moz-transition-delay: 0.2s; 
    -webkit-transition-delay: 0.2s; 
    -o-transition-delay: 0.2s; 
} 

你在你的头，转换和延迟约25种元素将适用于每个人。使用特定元素来提高效率（和优雅）。

在转换时使用“all”通常是一个坏主意，它们是创建冲突的好方法。使用特定的属性。

这种快速和漂亮的答案总结了几乎一切： CSS3, WebKit Transition Order? How to queue to the transitions?

Answer 2

问题由堆叠的转变上继承transition属性元素引起的。

a, span { 
 
    transition: 0.5s; 
 
} 
 

 
a { 
 
    padding: 0.5em 0.75em; 
 
    border: 1px solid red; 
 
    color: #000; 
 
    display: inline-block; 
 
} 
 

 
a:hover{ 
 
    color: #f00; 
 
    background-color: #0f0; 
 
}

<a> 
 
    <span>Text Content</span> 
 
</a>

a, span CSS的部分适用过渡到两个元件。 span继承了a的颜色，但在a完成其动画之前不会应用动画颜色。

对于上面的例子中最好的解决将是删除规则a, span 并将transition: 0.5s;规则内为a：

a { 
 
    transition: 0.5s; 
 
    padding: 0.5em 0.75em; 
 
    border: 1px solid red; 
 
    color: #000; 
 
    display: inline-block; 
 
} 
 

 
a:hover{ 
 
    color: #f00; 
 
    background-color: #0f0; 
 
}

<a> 
 
    <span>Text Content</span> 
 
</a>

Answer 3

的另一个原因是不必要的延误是overflow: hidden; 。例如，如果您有下拉切换导航栏：当它被切换打开，并且max-height设置为1000px，同时也具有CSS属性overflow: hidden;时，从max-height转换为关闭需要更长的时间。

Answer 4

我遇到了同样的问题。我的问题是，我试图过渡最初从父项继承的属性。事实证明，Webkit浏览器（不是Firefox）要求你转换的每个属性实际上都应用于该元素。看起来他们不能转换已被继承的属性。

例如，我试图做到这一点：

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

.parent { 
    color: #000; 
} 

.child { 
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s; 
    border-top: 10px #000 solid; 
} 

.child.active { 
    border-color: #ff0000; 
    color: #ff0000; 
} 

火狐成功地做到这一点，但Chrome和Safari都需要这样的：

.child { 
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s; 
    border-top: 10px #000 solid; 
    // event though the color property is inherited, 
    // webkit requires it for transitions 
    color: #000; 
}