html – CSS转换：Webkit浏览器中奇怪的不必要的延迟(Chrome和Safari)

我希望有人可以帮助解释我在Webkit浏览器中遇到的奇怪行为,并且在CSS转换中有不必要的延迟.

这是我正在处理的页面的链接：http://demo.daised.com/help-me

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

但是,在Webkit浏览器中,导航项的字体大小的转换会延迟6(！)秒.

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

最佳答案

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个元素,过渡和延迟将应用于每个元素.使用特定元素可提高效率(和优雅).

使用“全部”转换通常是一个坏主意,它们是创建冲突的好方法.使用特定属性.

这个快速而美观的答案总结了几乎所有内容：
CSS3,WebKit Transition Order? How to queue to the transitions?