web-dev-qa-db-ja.com

変換変換を使用したCSSキーフレームアニメーションは、IE 10およびFirefoxでピクセル全体にスナップします

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

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でも何もしません秘訣は、要素をこれまでになくわずかに縮小し、Z軸に1pxのオフセットを指定してtranslate3dを使用することです。

@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
   }
}
htmlcsscss-animationscss-transforms
15
Strille

私はあなたの質問が大好きです！ FirefoxとIE10のピクセルスナップを通知するのに良い仕事です。

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

IE10ピクセルスナップの問題 に関するトピックがあります。

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

これをTyr：

@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
  }
}
5
wick3d

@Nemanjaは正しいですが、速度を微調整すると、より良い結果が得られることがわかります。これは、cssアニメーションではかなり一般的です。また、この場合、ハードウェアアクセラレーションを有効にしても、実際には違いはありません。コードを少し整理して問題なく実行しました。ie10はありません。ただし、私は11を持っています。それが10で実行されない場合は、translateZの2番目の変換を削除する必要があるかもしれません。

body {
    background-color: #ccc;
}

.bobbing {
    position: absolute;  
    animation: bobbingAnim ease-in-out .5s infinite;
    -moz-animation: bobbingAnim ease-in-out .5s infinite;
    -webkit-animation: bobbingAnim ease-in-out .5s infinite;    
}

.bobbing.text {
    font-size: 50px;
    color: #000;
    left: 30px;
    top: 30px;
}

.bobbing.image {
    left: 30px;
    top: 150px;
    background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
    width: 310px;
    height: 110px;
}

@keyframes bobbingAnim {
   50% {
       transform: translate(0, 12px) translateZ(0);       
   }
}

@-webkit-keyframes bobbingAnim {
   50% {
       -webkit-transform: translate3d(0, 12px, 0);       
   }
}

@-moz-keyframes bobbingAnim {
   50% {
       -moz-transform: translate3d(0, 12px, 0);       
   }
}
0
Zanderi