CSSトランジションとCSSアニメーションのパフォーマンス

Question

私は非常にシンプルな状況があります。ページ内の要素をフェードイン/アウトします（単純なdivなど）。私はこれが不透明で、CSSトランジションかCSSアニメーションのどちらかで達成できることを知っています。

2つのパフォーマンスに違いはありますか？私はいつもCSSトランジションを使用してきました（主にCSSラインの数が少なくて済むからです）。しかし、CSSアニメーションを使用するのが得策ではないかと思います。

Answer 1

いいえ、パフォーマンスはほぼ同じにする必要があります。

opacity変更はGPUによって処理されるので、最新のブラウザでは本当の滑らかな効果が得られます。

Answer 2

CSS3アニメーションを使用しているときに、一部のペイント作業がGPUに持ち込まれないため、CSS3アニメーションがCSS3トランジションより遅くなることがあります。

ここでは、CSS3 animation vs CSS3 transitionの詳細な比較があります。