16

IE 10 と Firefox の両方が、CSS キーフレーム アニメーションで変換 2D 変換を使用して位置をアニメーション化するときに、要素をピクセル全体にスナップするようです。

Chrome と Safari はそうではなく、微妙な動きをアニメートする場合にはるかに見栄えがします。

アニメーションは次の方法で行われます。

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

これが私が意味することの例です：

http://jsfiddle.net/yZgTM/ .

Chrome と IE 10 (または Firefox) で開くだけで、動きの滑らかさの違いに気付くはずです。

要素がハードウェアアクセラレーションで描画されているかどうかなど、この動作に影響を与える多くの要因がある可能性があることを認識しています。

ブラウザが常にサブピクセルに要素を描画するように強制しようとする修正を知っている人はいますか?

この同様の質問を見つけましたが、答えは変換変換を使用してアニメーション化することでした。これはまさに私がやっていることです: CSS3 Transitions 'snap to pixel'。

更新: 少し遊んだ後、Firefox の修正を見つけましたが、IE 10 では何もしません。トリックは、要素をわずかに縮小し、translate3d を Z 軸に 1 ピクセルのオフセットで使用することです。

@keyframes bobbingAnim {
   0% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }
}
4

3 に答える 3

5

あなたの質問が大好きです！Firefox と IE10 のピクセル スナップに気付きました。

私はこの件について少し前に調査しましたが、GSAP フォーラムをチェックすることをお勧めします。GSAP フォーラムには Web アニメーションに関する有益な情報がたくさん含まれています。

IE10 のピクセル スナップの問題に関するトピックです。

必要なことは、要素に最小限の回転を追加することです。これは、IE と Firefox が別の方法で再描画するようにするためです。これにより、ピクセル スナップが完全に停止します :)

これをティル：

@keyframes bobbingAnim {
  0% {
   transform: translate(0px, 0px) rotateZ(0.001deg);  
   animation-timing-function:ease-in-out
  }

  50% {
    transform: translate(0px, 12px) rotateZ(0.001deg);
    animation-timing-function:ease-in-out
  }

  100% {
   transform: translate(0px, 0px) rotateZ(0.001deg);
   animation-timing-function:ease-in-out
  }
}
于 2016-06-15T07:34:25.320 に答える
-4

半分のピクセルの動きはありません。そのようなことはありません。

あなたの問題は、「ピクセルスナップ」ではなく、アニメーションの速度と滑らかさです。

于 2013-08-18T21:13:23.820 に答える