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

我有一个自动滚动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); 
    }

}

来源

2016-07-23 nethken

您是否尝试了不同的浏览器？我注意到Firefox在使用CSS进行转换时，文本和图像在播放动画时通常会变得模糊。也许尝试使用'translate（）'而不是'translate3d（）' –

@amorten我目前的浏览器是铬我没有尝试过在Firefox上。我尝试了您的建议，将'translate3d（）'更改为'translate（）'，但无效。 – nethken

您的网站是否在线，以便我可以在行动中看到它？ –

我试着模仿我从这个jsfiddle你的描述得到。

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

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

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

此外，请一定要包括所有的浏览器支持在.events:hover {}通过包括：

.events:hover { 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
}

来测试显示器的模糊将采取，而它的动画截图的一个好办法，当它不是，然后比较两者。

来源

2016-07-27 07:03:46

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

回答

相关问题