我希望有人可以帮助解释我在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?
