动画 - 文本开始滚动时变得模糊

Question

我有一个自动滚动div但是当它开始滚动时我有一个问题，文字变得模糊可以有人帮我这个吗？

样本图片。 这是我的CSS

.events {

  animation: autoscroll 25s ease-in-out infinite;
  animation-delay: 2s;


}
.events:hover {
    -webkit-animation-play-state: paused;
}
@keyframes autoscroll {
  from { 

    transform: translate3d(0,0,0);

  }
  to {
    transform: translate3d(0,-90%,0);
  }

}

Answer 1

我尝试过模仿我在jsfiddle中的描述中获得的内容。

最大的区别是你可以尝试使用osx的以下属性，虽然我没有看到我的测试有任何不同。

#display_list

我测试了Firefox，Chrome和Safari中的上述小提琴，所有文字都显得很清晰。我注意到的唯一模糊是来自我的显示器的响应时间，所以这可能也是你注意到的。

此外，请务必在text-rendering: optimizeLegibility; // SVG property -webkit-font-smoothing: antialiased; // Font-smoothing on osx in Safari/Chrome -moz-osx-font-smoothing: grayscale; // Font-smoothing on osx in Firefox 中添加对所有浏览器的支持，包括：

.events:hover {}

测试显示器模糊的一个好方法是在动画时截取屏幕截图，然后不进行比较，然后比较两者。