CSS3动画过程中文字模糊如何解决？

Question

我使用animate.css给文本添加了动画效果，文字动画在运动过程中模糊的十分明显，不知道是什么原因？

<li id="inside_5460252786" num="1" ctype="2" class="wsite-text ng-scope" comp-click="5460252786" comp-drag="5460252786" comp-hover="5460252786" 
style="width: 270px; height: 51px; left: 43px; top: 50px; z-index: 1; 
transform: rotateZ(0deg); opacity: 1; position: absolute;">
<div class="element-box" 
style="width: 100%; height: 100%; top: 20px; left: 5px; font-size: 24px; 
writing-mode: horizontal-tb; z-index: 1; color: rgb(103, 103, 103); 
transform: none; text-align: left; border-width: 0px; border-style: solid; 
border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; 
padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px;
 margin-top: 0px; margin-bottom: 0px;">
    <div class="element-box-contents" style="width: 100%; height: 100%">
        <div id="5460252786" class="element comp_paragraph editable-text" 
style="cursor: default; font-size: 24px; width: 270px; height: 51px; 
text-rendering: optimizeLegibility; -webkit-writing-mode: horizontal-tb;
 writing-mode: horizontal-tb; min-height: inherit; min-width: inherit;
 left: 43px; top: 50px;">
            <span style="font-size: 16px;">双击此处进行编辑</span>
        </div>
    </div>
</div>
</li>

以上贴出是易企秀动画元素的CSS，发现他们的动画过程中清晰度还可以，不知道如何实现的，我试了把他们用的几个关键的css属性加到我的上面，并没有什么效果。

麻烦大神们看下，关键点是否在以上的style中？

Answer 1

我遇到过这个问题

transform导致的

具体表现在，如果translate3d(或者scale3d...)里的值用的百分比，而跟宽高相乘后得到非整数的话，就会变模糊
如：
width:99px;
transform:translate3d(50%,0,0);
这样就模糊

你改成100px就不模糊

建议：保证相乘后为整数或者translate3d(或者scale3d...)里的值直接用数值表示（px,rem..）

Answer 2

你要么给一个连接要么贴出代码，这样一句话怎么帮你解决啊

Answer 3

http://ued.ctrip.com/blog/fon...

Answer 4

别人博客的文章Transform文字模糊的问题