ボックス要素の表示位置を移動するアニメーションがカクつく

ボックス要素の表示位置をcssを利用して移動させるアニメーションを作成した際、Androidのchromeで表示がカクつく問題がありました。
この解決策について調べてみました。

アンチパターン

divで定義したボックスの表示位置を移動するアニメーションを作成する場合。

もともと、cssでボタンが押されたときにあるdiv要素の位置を変えるようなものを下みたいな方法で実装していました。

.menuというdiv要素をあらかじめleft:-240pxで定義。
メニューボタンが押されたら、動かしたいdiv要素に.menu-openクラスを追加する。
ということで、以下のようなcssを定義しました。（一部抜粋）

.menu {
      position: fixed;
      left: -240px;

      transition: all 0.4s;
}

.menu-open {
      left: 0px;
}

これを、実際に動かしたところ、PCやiphoneで動かす分には問題なかったのですが、androidのchromeで動かした場合に、アニメーションがカクついて表示される問題がありました。

解決策

いろいろ調べたところ、cssには表示位置を移動させるためのtransformsという仕様があって、この transformプロパティを使用する とカクつき問題が解消することがわかりました。
さらに、PCのブラウザとかで見た動きもよりなめらかになります。

.menu {
  position: fixed;
  left: -240px;

  transition: all 0.4s;
}

.menu-open {
  -webkit-transform: translate(240px, 0);
          transform: translate(240px, 0);
}

おわりに

以下のブログエントリにレスポンシブなメニューの作り方についてまとめてあるので、興味ある方は参照ください。

レスポンシブなサイドメニューを表示させる