Question

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

＆＃13;

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);
  }
}

＆＃13;

<div></div>

＆＃13;

[编辑]我没有明白如何链接到jsfiddle。所以继承人的链接： jsfiddle.net SLASH focgzeye

任何人都可以提供帮助吗？

Answer 1

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

line-height:100px;

在Firefox 43.0.1上测试，但闪烁问题相同。

Here the jsfiddle update.

CSS3：在FF上变换闪烁

1 个答案: