Question

我正在尝试通过实现CSS3的过渡属性在按钮上制作流畅的动画。在 Firefox ， Safari 和 Opera 中，按钮平滑地从深绿色变为浅绿色（IE不支持过渡）。

但出于某种原因，在 Chrome 中，如果您将鼠标悬停在一个按钮上，然后立即将鼠标悬停在另一个按钮上，则颜色似乎会滞后。有时我会得到一个霓虹绿色按钮，有时我会得到一个黑色按钮;每当我从一个按钮到另一个按钮运行鼠标太快时会发生一些事情。 Chrome可能无法跟上过渡或其他什么吗？

正在使用的Barebones代码：

.button {  
transition: background-color 0.2s;  
-moz-transition: background-color 0.2s;  
-webkit-transition: background-color 0.2s;  
background-color: #466b46; 
}

.button:hover {  
background-color: #74d06c;  
}

Chrome版本为24.0.1312.56。任何帮助将不胜感激。

Answer 1

如果我清楚地了解您的问题，您希望在悬停按钮时平滑过渡Chrome？为了改变你的代码：

.button {  
     transition: background-color linear 0.2s;  
     -moz-transition: background-color linear 0.2s;  
     -webkit-transition: background-color linear 0.2s;  
     background-color: #466b46; 
}

.button:hover {  
     transition: background-color linear 0.2s;  
     -moz-transition: background-color linear 0.2s;  
     -webkit-transition: background-color linear 0.2s;  
     background-color: #74d06c;  
}

使用此代码，如果您将鼠标悬停在按钮上，则还可以平滑过渡到返回首字母参数。

我希望这会对你有所帮助。

Chrome中的CSS3 Transition Bug会产生奇怪的背景颜色

1 个答案: