読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

CSS の transform: rotate() 動作を IE11、Edge、Chrome、Firefox で比べてみる

開発 Microsoft Edge IE11 Chrome Firefox

CSS のアニメーションの動作情報を取得できないので見た目で比べています。

検証機

  • Windows 10 Pro Build 10586.494
  • Core i7-3610QM
  • GeForce GT 650M
  • Memory 16GB

ScreenToGif 2 でキャプチャ。

 

本題

左から IE11、Edge、Chrome、Firefox の順で2周後ループします。

IE11、Edge 基準にすると、
わかりずらいのですが Chrome が約1フレーム遅れ、
Firefox は描画までに時間がかかっているようです。

http://toshihirogoto.github.io/maguroader/anime.gif

http://toshihirogoto.github.io/maguroader/base.mp4

  

一応、AfterEffects で
タイムリマップをかけてスローにしていました。

http://toshihirogoto.github.io/maguroader/remap.mp4

 

まとめ

IE11、Edge のアニメーションは割と綺麗に動きます。

Chrome に関してはちゃんと考えないと UI も含めたアニメーションでは処理落ちが起こります。
今回、動画はつくっていませんが Safari も Chrome と同様です。

Firefox は全体的にアニメーションがもっさりですが Chrome の様にフレームがおかしくなるケースはあまり見つかりません。

スポンサーリンク