CSS转换：Webkit浏览器中奇怪的不必要的延迟（Chrome和Safari） [英] CSS transitions: Strange unwanted delay in Webkit browsers (Chrome and Safari)

问题描述

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

以下是链接到页面I正在研究： http://demo.daised.com/help-me

期望的结果是当用户向下滚动页面时菜单栏缩小。这在Firefox中完美动画。然而，在Webkit浏览器中，导航项的字体大小的过渡延迟了6（！）秒。

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

解决方案

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

无论如何，您在标题中所做的事情是危险的，并且可能会引发奇怪的行为：

 标题* {
转换：全部0.8s; 
 -moz-transition：全部0.8s; 
 -webkit-transition：全部0.8s; 
 -o-transition：全部0.8s; 
 
转换延迟：0.2s; 
 -moz-transition-delay：0.2s; 
 -webkit-transition-delay：0.2s; 
 -o-transition-delay：0.2s; 
 
 $ / code> 

您的头文件中包含大约25个元素，转换和延迟将应用于他们每个人。使用特定元素来提高效率（和优雅）。



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

这个快速且很好的答案概括了所有内容：
CSS3，WebKit Transition Order？如何排列到转场？

I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.

Here is a link to the page I'm working on: http://demo.daised.com/help-me

The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.

However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.

Thanks for helping me understand this better.

解决方案

user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.

Anyway what you've done in the header is dangerous, and may trigger weird behaviors :

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;
}

You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).

Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.

This quick and nice answer sums up pretty much everything : CSS3, WebKit Transition Order? How to queue to the transitions?

这篇关于CSS转换：Webkit浏览器中奇怪的不必要的延迟（Chrome和Safari）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！