.burger{
    width: 25px;
}

.burger .line {
    display: block;
}
.burger::before,
.burger::after {
    content: "";
    transition: 300ms;
    transform-origin: center center;
}

.burger::before {
    transform: translateY(8px);
}
.burger::after {
    transform: translateY(-8px);
}
.burger .line,
.burger::before,
.burger::after {
    width: 25px;
    height: 2.1px;
    display: block;
    background-color: #ffffff;
    border-radius: 5px;
    position: absolute;
}

.burger.open .line{
    width: 0;
    transition-delay: 100ms;
}
.burger.open::before {
    animation: animation1 400ms ease-out 0s 1 both;
}
.burger.open::after {
    animation: animation2 400ms ease-out 0s 1 both;
}
.burger:active {
    scale: 0.95;
}
@keyframes animation1 {
    0% {
        transform: translateY(8px) rotate(0deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(0px) rotate(45deg);
    }
}
@keyframes animation2 {
    0% {
        transform: translateY(-8px) rotate(0deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(0px) rotate(-45deg);
    }
}