CSSアニメーションを使用したアニメーションの遅れとちらつき

Question

私はインタラクティブなWeb UIで作業しており、ちらつきや遅れのあるアニメーションが走っています。

ほとんどすべてのCSSトランジションを使用しています。特定のアニメーションを開始/停止するためにjQueryでクラスを追加したり削除したりしています。私はこれがjQueryアニメーションを使用するよりもパフォーマンスが良いと聞いてきましたが、Chrome（アプリケーションの目的のブラウザ）を使用しているときに、まだちらつきや遅れのアニメーションが走っています。

は、ここでそれをチェックアウト：

lib.ncsu.edu/hunt_touchscreens/demoここで私がやっている遷移の1の例があります。これは非常に簡単で、私はWebkit、oなどのプレフィックスを使用していません。

#x { 
    opacity: 0; 
    transition: opacity .5s; 
} 

これらのパフォーマンスの問題を回避するための戦略を、私はこの質問はあまりにもオープンエンドでないことを願うが、私は好奇心、これは異なる同時遷移の多くを持つブラウザだけの制限である、または効果的です。

ありがとうございました。

Answer 1

多くの作業が必要になるかもしれませんが、あなたのサイトではtransitionが左から右から多く、その要素を移動するだけでなく、そのレイアウトをやり直さなければならないのでその周りの他の要素。

パフォーマンスの良いCSSアニメーションを作成するというトリックは、ブラウザが非常に高速ないくつかのプロパティに固執しています。特に、多数の要素が潜在的に一度に動く可能性があるあなたのようなトランジションヘビーなページがある場合。

それhereについての詳細を読み、それの要旨は、要素を変更するための次のプロパティを使用して、

• 位置 - 変換：移動X（n）は、移動Y（n）はtranslateZ（N）
• スケール変換：スケール（n）;
• Rotation - transform：rotate（ndeg）;
• 不透明度 - 不透明度：n;

だから、transform: translateX();のいくつかのフォームなど、すべてのものを「左」の位置の変更を書き換え、あなたが最適なパフォーマンスをしたい場合には、ページ内の他の要素にどのように影響するかを検討する必要があります。