mobile - Animate Foundation 5 Offcanvas アイコン

Question

私は今半日グーグルで検索し、いくつかの解決策を試しましたが、何もうまくいきませんでした. 皆さんが私の最後のチャンスです:( 私はfoundation5を使って新しいウェブサイトを立ち上げました.モバイル版ではoffcanvasを使っています.offcanvasバーガーを置き換えるか、少なくともそれをアニメーション化しようとしています.すぐに使えるスタイルは、オフキャンバスを再び閉じるためにも使用できることを示していないため、実際にはユーザーフレンドリーではありません。

私はここのようなものを探しています: http://sarasoueidan.com/blog/navicon-transformicons/

私はすでにそれを試してみました

 .menu-icon.arrow.close {
  transform: scale3d(.8,.8,.8);
}

.menu-icon.arrow.close .lines{
    &:before,
    &:after {
      top: 0;
      width: $button-size/1.8;
    }

    &:before { transform: rotate3d(0,0,1,40deg); }
    &:after { transform: rotate3d(0,0,1,-40deg); }
}

このようなボタンで

    <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon lines-button arrow arrow-left" role="button" aria-label="Toggle Navigation"><span class="lines"></span></a>
    </section>

私が何をすべきか提案はありますか？