3

staticCSS アニメーションがトリガーされ、オブジェクトが CSS を使用して( relative、など)以外の位置に配置されると、absoluteオブジェクト内のテキストがアニメーションの継続時間中に突然非常に薄くなります。その後、全幅に戻ります。

このページを Safari で実行してみてください: http://pastehtml.com/view/bjgaloxjj.html (明確にするために更新)

#contentdiv が絶対的または相対的に配置されていない場合、問題はなくなることに注意してください。これは iPad Web アプリ用であり、デスクトップよりもデバイスで顕著です。

この干渉の原因について何か考えはありますか?

明確化のために編集:ハードウェアで高速化されているため使用する必要があり、これによりアニメーションがよりスムーズになりますwebkit-transform。webkit-transition

4

1 に答える 1

1

私はあなたの問題を再現することができました、そしてこれはそれを修正します。transform探している結果を達成するためにを必要とせず、ただ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 に答える