Question

我正在为一个按钮设置动画，并在Firefox和Chrome中测试了该动画。在Chrome浏览器中，一切正常，但在Firefox中，文字颤抖。我可以使用-moz种东西或其他方法来解决它吗？

垃圾邮件点击时应该很明显，尽管即使在Firefox中，片段中的垃圾邮件也没有。...

编辑：经过一番尝试和错误后，我发现转换时问题出在文本框中：translate（-50％，-50％）。您知道其他选择吗？我尝试将相对位置定位在前35％，但包装盒中的内容之前被剪掉了

This is what I see。文字运动会随着缩放而变化，但是我可以向您保证，即使从视频中看不出来，它也会在悬停后改变位置。

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    
    transition: all 0.2s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

Answer 1

我猜这是Firefox中的 rendering 问题-由于animation-duration很短，我想您可以使用以下内容：

您可以用transition: all 0.2s代替transition: box-shadow 0.2s, transform 0.2s在Firefox中进行解决的操作-请参见以下演示：

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: box-shadow 0.2s, transform 0.2s; /* CHANGED */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

CSS文字抖动Firefox

1 个答案: