タグ付けされた質問 「translate-animation」

ホバー時にCSSトランジションエフェクトがdivを移動するCSSがあります。 この例でわかるように、translateトランジションには、div内の画像を1px右/下に移動させる（そして、サイズを少しだけ変更する可能性があります）という、ひどい副作用があり、場違いに見えて、焦点が合っていない... グリッチはホバー効果が適用されている間ずっと適用されているようであり、試行錯誤のプロセスから、私は安全に、トランジショントランジションがdivを移動するときにのみ発生するように見える（ボックスの影と不透明度も適用されますが、違いはありません）削除時のエラー）。 この問題は、ページにスクロールバーがある場合にのみ発生するようです。したがって、divのインスタンスが1つしかない例でも問題ありませんが、同じdivが追加され、ページにスクロールバーが必要になるため、問題が再び発生します...

150 css  image  hover  positioning  translate-animation 

多くのブログが、transform: translateZ(0)アニメーションとトランジションを高速化するためにを使用して、要素が3Dであると考えるようにGPUを「トリック」することでパフォーマンスの向上を表現しています。この変換を次のように使用することに意味があるかどうか疑問に思っていました。 * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }

96 performance  css  translate-animation