css - CSS和GSAP缩放图形问题

在Firefox 28上，文本在动画结束时会产生轻微的抖动。在Chrome 34中，文字变得模糊。看起来它已转换为位图并放大了。在动画结束时，它保持模糊。我很震惊，尽管它在IE11上运行良好。

http://codepen.io/anon/pen/fsljh

不知道这是我做错了还是浏览器的错误/问题。如果可能，尝试获得平滑，清晰，无打-的旋转/缩放。

最佳答案

尝试将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

希望这可以帮助！ :)