css3 - CSS3:在FF上闪烁

我尝试为伪元素宽度css3设置动画。一切都好。但是在动画末尾的Firefox（43.0.3）上，字体闪烁：

div {
  width:500px;
  height:500px;
  color:red;
  font-size:100px;
  background:black;
  transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
div:before {
  content:"test";
  font-size:100px;
  color:white;
  margin:0 0 0 200px;
  display:block;
  animation:test 2s ease-in-out 1s both;
  transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
@keyframes test {
  0% {
    transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
  }
  50% {
    transform:matrix(1.50,0.00,0.00,1.50,0,0);
  }
  100% {
    transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
  }
}

<div></div>

[编辑]我不明白如何链接到jsfiddle。所以这是链接：
jsfiddle.net SLASH focgzeye

有人可以帮忙吗？

最佳答案

尝试添加与font-size相同的行高：

line-height:100px;

在Firefox 43.0.1上进行了测试，但存在相同的闪烁问题。

Here the jsfiddle update.

关于css3 - CSS3:在FF上闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34609387/