CSS メニューボタンアニメーション

    //vue のクリック イベントを通じてクラスを変更する
    <div 
        クラス="ハンバーガー" 
        スタイル="float: right;"
        :class="{'transform':rightTopBtn}"
        @click.stop="rightTopBtn=!rightTopBtn"
    >
        <div></div>
        <div></div>
        <div></div>
    </div>

  <!--ボタン コンテナ START-->
    .バーガー{
        カーソル: ポインタ;
        表示: インラインブロック;
        マージン: 7px 6px 0 0;
        アウトライン: なし;
    }
    <!--ボタンコンテナEND-->
    <!--3 本の水平線は rotate3d START によって回転します-->
    .burger div {
        幅: 30ピクセル;
        高さ: 4px;
        下マージン: 6px;
        背景色: rgb(51, 51, 51);
        変換: rotate3d(0, 0, 0, 0);
    }
    <!--3 本の水平線 END-->
    .burger.transform div {
        背景色: 透明;
    }
    .burger.transform div:first-of-type {
        上: 10px;
        変換: rotate3d(0, 0, 1, 45deg)
    }
    .burger.transform div:last-of-type {
        下: 10px;
        変換: rotate3d(0, 0, 1, -45deg)
    }
    <!--START をクリックした後の 1 番目と 3 番目の水平線の効果-->
    .burger.transform div:first-of-type、.burger.transform div:last-of-type {
        遷移: transform .4s .3s イーズ、背景色 250ms イーズイン;
        背景: #00c1de;
    }
    <!--クリック後の 1 番目と 3 番目の水平線の効果END-->
    <!-- START をクリックしてキャンセルした後、アニメーションを再開します -->
    .burger div:first-of-type、.burger div:last-of-type {
        遷移: transform .3s、ease .0s、background-color 0ms、ease-out;
        位置: 相対的;
    }
    <!--クリックをキャンセルした後にアニメーションを再開しますEND-->