CSS 过渡在 chrome 中不起作用，在切换属性时会短暂工作

Question

我有以下 css 动画，它在 safari 上按我希望的方式工作，但在 chrome 上却不行。 square0 是一个 div，它在悬停时改变颜色，在鼠标移动后慢慢变回原来的颜色。在 Chrome 中，如果没有悬停，div 会立即变为空白。

我看了这个问题， CSS3 Transition not working in Chrome anymore , 并添加了背景颜色字段。这并没有立即改变任何东西，但是当我在 chrome 中检查页面并切换该字段(打开或关闭，无关紧要)时，动画只能正常工作几秒钟。

我不确定是什么原因导致的，但如有任何帮助，我们将不胜感激。

.square0 {
  height: 150px;
  width: 150px;
  float: left;
  background-color: white;
  -moz-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
  -o-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
  -ms-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
  transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
}

.square0:hover {
  background-color: rgb(178, 49, 108);
}

Answer 1

您的代码与我一起使用没有任何问题。在 Chrome 浏览器中查看代码段。

 .square0 {
 height: 150px;
 width: 150px;
 float: left;
 background-color: #eee;
 -moz-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
 -o-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
 -ms-transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
 transition: background-color 21s cubic-bezier(0, 1.31, .51, 1.05);
 }
 .square0:hover {
 background-color: rgb(178, 49, 108);
 }

 <div class="square0"></div>