CSS-Menüschaltflächenanimation

    //Klasse durch Klickereignis in Vue ändern
    <div 
        Klasse="Burger" 
        Stil="float: rechts;"
        :Klasse="{'transform':rightTopBtn}"
        @click.stop="rightTopBtn=!rightTopBtn"
    >
        <div></div>
        <div></div>
        <div></div>
    </div>

  <!--Schaltflächencontainer START-->
    .burger {
        Cursor: Zeiger;
        Anzeige: Inline-Block;
        Rand: 7px 6px 0 0;
        Gliederung: keine;
    }
    <!--SchaltflächencontainerEND-->
    <!--Die drei horizontalen Linien werden durch rotate3d START gedreht-->
    .burger div {
        Breite: 30px;
        Höhe: 4px;
        Rand unten: 6px;
        Hintergrundfarbe: rgb(51, 51, 51);
        transformieren: 3d drehen(0, 0, 0, 0);
    }
    <!--Drei horizontale Linien ENDE-->
    .burger.transform div {
        Hintergrundfarbe: transparent;
    }
    .burger.transform div:erster-vom-Typ {
        oben: 10px;
        transformieren: 3d drehen(0, 0, 1, 45 Grad)
    }
    .burger.transform div:letzter-vom-Typ {
        unten: 10px;
        transformieren: 3d drehen(0, 0, 1, -45 Grad)
    }
    <!--Die Wirkung der ersten und dritten horizontalen Linie nach dem Klicken auf START-->
    .burger.transform div:erstes-vom-Typ, .burger.transform div:letztes-vom-Typ {
        Übergang: Transformation 0,4 s 0,3 s Leichtigkeit, Hintergrundfarbe 250 ms Leichtigkeit;
        Hintergrund: #00c1de;
    }
    <!--Die Wirkung der ersten und dritten horizontalen Linie nach dem KlickenEND-->
    <!--Animation nach Abbruch durch Klicken auf START fortsetzen-->
    .burger div:erstes-vom-Typ, .burger div:letztes-vom-Typ {
        Übergang: Transformation 0,3 s, Leichtigkeit 0,0 s, Hintergrundfarbe 0 ms, Auslaufzeit;
        Position: relativ;
    }
    <!--Animation nach Abbruch des Klicks fortsetzenEND-->