CSS过渡不工作在chrome，工作短暂时，一个属性被切换

Question

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

我看着这个问题，CSS3过渡不再在Chrome中工作，并添加了背景颜色字段。这并没有立即改变任何东西，但是当我在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>