css - テキストで webkit-transition を使用すると、最後にテキストがスナップされるのはなぜですか?

Question

以下をご覧ください: http://jsfiddle.net/2Vdef/1/

マウスを div の上に移動すると、テキストがアニメーション化されますが、最後に非常に魅力的でない opacity:1 へのスナップがあります。なぜそんなに突然？どうすればこれをスムーズにできますか？ありがとう

Answer 1

私は同じ問題に遭遇しました.この解決策は私の場合は機能しませんが、あなたの場合は機能します.

http://jsfiddle.net/2Vdef/13/

背面可視性を追加します。

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
backface-visibility:         hidden; 

編集:私の場合の解決策は、確かに背面の可視性でした。正しい要素に適用するだけです。の不透明度をアニメーション化し、に適用する必要がaあると想定しました。代わりに、 のコンテナに適用する必要がありました。backface-visbilityaa

動作しない: http://jsfiddle.net/9PmXu/ 修正済み: http://jsfiddle.net/9PmXu/1/

Answer 2

Chrome と FF Win 7 / OS X では問題ないように見えますが、もちろん IE では不透明度が段階的に変化することはありません。すべてのブラウザーで、jQuery を使用して同じ効果を実現し、アニメーションの速度を好きなように微調整することができます。http://jsfiddle.net/2Vdef/8/

Answer 3

次の方法で途切れを防ぐことができます。

-webkit-transform: translateZ(0);

http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/

Answer 4

これを変更してみてください：

-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;

これに：

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

すべての移行の問題がよりスムーズになるはずです。

また、@Slave からの上記の回答も正しいですが、「200」を「600」に変更して、もう少しスムーズにします。答えは正しいですが、私の答えは純粋な CSS です。