html - css3 アニメーション アーティファクト

Question

css3 animationに奇妙な問題があります。

適用されたブロック要素がありcss3 transformationます。-webkit-transform マトリックスを使用して変換を適用すると、要素は非常に滑らかに見えます。しかし、-webkit-keyframes でアニメーションを適用しようとすると、アニメーション中にフォントやその他の div がひどく見えます。

サンプルはこちらにあります: http://shuma.ru/animation.html

問題は、「Webkit ブラウザー Safari / Chrome」などで見られます。

Answer 1

この問題については、これを css に記述できます。

body{
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
} 

& サファリの場合、これを定義します:

-webkit-transform:translate3d(0,0,0);

アニメーション要素の CSS で 詳細については、これを確認してください