Question

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

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

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

关于造成这种干扰的原因有哪些想法？

编辑以澄清：webkit-transform和webkit-transition必须使用，因为它们是硬件加速的，这样可以使动画更流畅。

Answer 1

我能够重现您的问题并解决了这个问题。您无需transform即可获得所需的结果，只需transition。 transition本身就是硬件加速。

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

CSS Transitions使每个人的风格动画变得微不足道，但他们也是一个智能的性能功能。因为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>

CSS位置：relative和-webkit-transform创建文本权重故障

1 个答案: