Question

在Firefox 28上，文本在动画结束时会产生非常轻微的抖动。在Chrome 34中，文字变得模糊。看起来它已转换为位图并按比例放大。它在动画结束时仍然模糊不清。我很震惊，在IE11上它完美无缺。

不确定这是我做错了什么，或者是否是浏览器的错误/问题。如果可能的话，尝试获得平滑，锐利，无打嗝的旋转/缩放。

Answer 1

尝试将perspective添加到您尝试设置动画的元素的父div。

您现在应该在Chrome中看不到任何模糊文字：http://codepen.io/jonathan/pen/qmHwe

<强> JS：

var wrapper = document.getElementById("wrapper");
var sampleText = document.getElementById("sampleText");
// add perspective to its parent
// perspective applies to the children its added to
TweenMax.set(wrapper,{perspective:1000});
var bubAnim = TweenMax.to(sampleText, 3, {scale: 2.5, rotation:30});

bubAnim.play();

<强> HTML：

 <div id="wrapper">
    <p id="sampleText">About Me</p>
 </div>

资源：https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

希望这有帮助！：）

Answer 2

尝试添加：-webkit-font-smoothing：antialiased;在p文本上。当使用scrollmagic时，我也有一个问题是动画和看起来模糊的铬。知道为什么吗？网站是testing scrollmagic

Answer 3

它不是一个绿色的问题，而是一个浏览器错误的webkit。

试试这个：

 TweenMax.set(element, {force3D:false});

CSS＆amp; GSAP扩展图形问题

3 个答案: