CSS文字晃动的Firefox

Question

我在一个动画按钮，我在Firefox和Chrome浏览器测试的动画。在Chrome中一切正常，但在Firefox中的文本晃动。是否有任何-moz那种我可以使用或别的东西来解决这个问题嘛？

很明显看到垃圾邮件上点击的时候，虽然这里的片断没有做它甚至在Firefox .....

编辑：后有点试验和错误的，我发现这个问题是，当我转换文本框：翻译（-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中呈现的问题 - 作为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>