CSS 和 GSAP 缩放图形问题

Question

在 Firefox 28 上，文本在动画结束时会出现非常轻微的抖动。在 Chrome 34 中，文本变得模糊。看起来它已转换为位图并按比例放大。它在动画结束时保持模糊。令我震惊的是，它在 IE11 上运行得很好。

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

不确定是我做错了什么还是浏览器的错误/问题。如果可能，尝试获得平滑、锐利、无间断的旋转/缩放。

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

希望对您有所帮助! :)