html5 - CSS3动画执行过程中导致显示模糊

Question

问题：H5页面在执行元素的动画（如ZoomIn，循环5次）过程中，动画元素（如文字、图片等）会显示模糊，当动画执行完毕之后才会正常显示。

问题截图：

目前这个问题在PC端和移动端都会出现，网上查找相关问题无果，特在此提问，希望大家能帮忙解惑。

Answer 1

http://www.cnblogs.com/rubylo...

Answer 2

I have also encountered this problem, because the rem unit used has a decimal point. Changing it to an integer px will make it less ambiguous
The specific reason may be a problem with the browser’s css3 animation rendering process. Stay tuned and wait for the expert’s answer

Answer 3

Relevant information on the Internet says that it is because the 3D animation uses a decimal point setting, which causes the calculated px value to appear as a non-integer, resulting in blurry and unclear problems, but the specific reason is not yet determined. In addition, some 3D animations that need to be used can only set decimal multiples or percentage multiples. The calculated results cannot be completely guaranteed to be integers, so this direction may not be able to completely solve the problem.