Edit in JSFiddle

<input class="nav-checkbox" id="toggle" type="checkbox">
<label class="nav-label" for="toggle">
    <i class="icon icon-menu"></i>
</label>

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #272e31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-checkbox {
    display: none;
}

.nav-label {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-menu,
.icon-menu:before,
.icon-menu:after {
    box-sizing: border-box;
    width: 72px;
    height: 8px;
    background-color: #1ca1e3;
    display: block;
}

.icon-menu {
    position: relative;
    margin: auto 0;
    animation: off 1s ease-in-out;
}

.icon-menu:before,
.icon-menu:after {
    transition: all 1s ease-in-out;
    position: absolute;
    right: 0;
    content: "";
}

.icon-menu:before {
    top: -24px;
}

.icon-menu:after {
    bottom: -24px;
}

#toggle:checked ~ [for="toggle"] .icon-menu {
    animation: on 1s ease-in-out;
    transform: rotate(-180deg);
}

#toggle:checked ~ [for="toggle"] .icon-menu:before,
#toggle:checked ~ [for="toggle"] .icon-menu:after {
    width: 45px;
    right: -10px;
}

#toggle:checked ~ [for="toggle"] .icon-menu:before {
    top: -13px;
    transform: rotate(45deg);
}

#toggle:checked ~ [for="toggle"] .icon-menu:after {
    bottom: -13px;
    transform: rotate(-45deg);
}

@keyframes on {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-180deg);
    }
}

@keyframes off {
    from {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(0);
    }
}