3

当触发 CSS 动画并且使用 CSS 将对象定位为static( relative、absolute等) 以外的任何内容时，对象内的文本在动画期间突然变得非常细。然后它会恢复到全宽。

尝试在 Safari 中运行此页面：http: //pastehtml.com/view/bjgaloxjj.html（为澄清而更新）

请注意，当#contentdiv 没有绝对或相对定位时，问题就会消失。这适用于 iPad 网络应用程序，在设备上比在桌面上更明显。

关于是什么导致这种干扰的任何想法？

编辑澄清：webkit-transform并且webkit-transition必须使用，因为它们是硬件加速的，这会导致更流畅的动画。

4

1 回答 1

1

我能够重现您的问题，这解决了它。你不需要 atransform来达到你正在寻找的结果，只需要一个transition. transition本身就是硬件加速的。

来自http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell：

CSS 过渡使样式动画对每个人来说都是微不足道的，但它们也是一个聪明的性能特性。由于 CSS 过渡是由浏览器管理的，因此可以大大提高其动画的保真度，并且在许多情况下是硬件加速的。

演示：http: //jsfiddle.net/ThinkingStiff/bqSJX/

脚本：

function doMove() {
    document.getElementById('mover').style.left = '150px';

    window.setTimeout( function() {
        document.getElementById('mover').style.left = '50px';
    }, 1000 );

}

window.setInterval( function() { doMove(); }, 3000 );

CSS：

#content {
    font-size: 150%;
    position: relative;   
}

#mover {
    font-size: 200%;
    left: 50px;
    position: absolute;
    top: 250px;
    transition: left 1.1s ease-in-out;
}

HTML：

<div id="content">A large cake with seventeen BURNING candles is in the
    center of the table. It says "HAPPY 16TH BIRTHDAY" and
    "GOOD LUCK, WESLEY." The whole BRIDGE CREW waits
    around the table as Wesley ENTERS with Beverly. He's
    touched, embarrassed and -- wants to get out of there.</div>
<div id="mover">SOMETHING</div>
于 2012-01-03T02:40:09.633 回答