Question

我有一些适用于Mozilla Firefox的CSS代码，而不适用于Google Chrome。

.lightBtn {
    width: 500px;
    height: 49px;
    color: #000000;
    background: white;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    display: inline-block;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.lightBtn:hover {
    background: black;
    color: white;
}
.lightBtn span {
    display: inline-block;
    position: relative;
   -webkit-transition: 0.25s;
    transition: 0.25s;
}
.lightBtn span:after {
    content: '>>';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}   
.lightBtn:hover span {
    padding-right: 25px;
}
.lightBtn:hover span:after {
    opacity: 1;
    right: 0;
}

<button class="lightBtn" ><span>Special effect</span></button>

<p>Hover over the div element above, to see the transition effect.</p>

在Mozilla中，字体颜色过渡从黑色变为白色，在Chrome中，它在指定时间后变为白色。我该如何解决？

我检查了基本转换并且效果很好，但是在悬停时添加动画时，颜色本身的转换不起作用。 This is animation I'm trying achieve。最初它没有字体颜色过渡。颜色过渡和动画都是分开进行的，但在组合时，字体颜色过渡不起作用（在Google Chrome中）。你可以查看Mozilla我想要实现的目标。

Answer 1

我对这个答案并不感到兴奋，但是你的代码的缩减版本（不丢失任何伪元素或其他答案的效果）在多次重复尝试后会在mouseIn和mouseOut上显示不一致的结果。每隔3或4次悬停，伪元素内容>>将立即开始出现，然后慢慢凝固。剩下的时间我都在盘旋，它有你经历的滞后。

总之，这看起来像WebKit渲染错误。我已经在这里提交了一个：https://bugs.webkit.org/show_bug.cgi?id=163078所以我会在取得一些进展后再回来查看。

此削减版本确实可以消除Special effect文字中的延迟。我将转换时间标准化了。

＆＃13;

.lightBtn {
    width: 500px;
    height: 49px;
    color: #000000;
    background: white;
    display: inline-block;
}
.lightBtn:hover {
    background: black;
    color: white;
}
.lightBtn span {
    display: inline-block;
    position: relative;
    transition: 0.25s;
}
.lightBtn span::after {
    content: '>>';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.25s;
}   
.lightBtn:hover span {
    padding-right: 25px;
}
.lightBtn:hover span::after {
    opacity: 1;
    right: 0;
}

＆＃13;

<button class="lightBtn"><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>

＆＃13;

Answer 2

好吧，让我们来看几件事：

首先，您继续声明transition-duration: 0.2s;和-webkit-transition-duration: 0.2s;，然后声明transition: all 0.25s;，它会覆盖前两个属性中声明的值。
您all的值为transition，因为它会达到性能，所以这是不可取的。
如果您设置transition: all .25s;来设置初始转换，然后使用transition-property: background-color, border, box-shadow, color;覆盖属性，则转换应该正常。

Here是一个包含功能代码的JSFiddle。

如果此处没有做任何事情，那么可能是您的浏览器已经过时，正如其他人已经指出的那样。

Answer 3

如果你有

Term

没有必要

public virtual ICollection<Term> Terms { get; set; }

0.25s将是持续时间，在您的情况下，它可能是您的浏览器版本，因为它适用于我，我正在使用chrome。尝试添加它，看看它是否有帮助，因为你说时间有效，但没有动画，所以我认为这是因为你仍然需要webkit前缀。

Organization

Answer 4

如果您删除所有其他内容以使代码尽可能基本会发生什么？这有用吗？如果是这样，那么你可能需要排除一些特殊性问题或类似的东西......或者你的chrome版本已经过时了（尽管这似乎不太可能）。

这适用于我的chrome和FF顺便说一句。

<!DOCTYPE html>
<html>
<head>
<style>

.lightBtn {
    width: 100px;
    height: 100px;
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
   background: black;
    color: white;
    border: 2px solid rgba(12, 1, 29, 0.87);
    box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
</style>
</head>
<body>


<span class="lightBtn"></span>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Answer 5

看起来像ff和chrome一样。

.lightBtn {
  color: #000000;
  background: white;
  height: 49px;
  border: 2px solid white;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  border-radius: 0px 8px 8px 0px;
  font-size: 16px;
  font-family: Audiowide;
  display: inline-block;
  transition: all 0.25s;
  cursor: pointer;
}

.lightBtn:hover {
  background: black;
  color: white;
  border: 2px solid rgba(12, 1, 29, 0.87);
  box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}

<a class="lightBtn">
Hi guys!
</a>
<button class="lightBtn">
  Wassup
</button>

CSS转换无法在Chrome上运行

5 个答案: