CSS3 : transform flickers on FF

Question

我尝试为伪元素宽度 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

有人可以帮忙吗？

Answer 1

尝试添加与字体大小相同的行高:

line-height:100px;

在 Firefox 43.0.1 上测试，但有同样的闪烁问题。

Here the jsfiddle update.