CSS: Toggle Navigation Animation

index.css

// HTML

<div id="toggleNav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

// CSS

#toggleNav
{
    width: 3.8rem;
    height: 3.4rem;
    position: relative;
    cursor: pointer;
    @include transform(rotate(0deg));
    @include transition(.5s ease-in-out);
    background-color: #0E3C70;

    span
    {
        display: block;
        position: absolute;
        left: .9rem;
        height: .2rem;
        width: 2rem;
        background: #FFFFFF;
        @include opacity(1);
        @include transform(rotate(0deg));
        @include transition(.25s ease-in-out);
    }

    span:nth-child(1)
    {
        top: .9rem;
    }

    span:nth-child(2), span:nth-child(3)
    {
        top: 1.6rem;
    }

    span:nth-child(4)
    {
        top: 2.3rem;
    }

    &.open
    {
        span:nth-child(1), span:nth-child(4)
        {
            top: 1.8rem;
            width: 0%;
            left: 50%;
        }

        span:nth-child(2)
        {
            @include transform(rotate(45deg));
        }

        span:nth-child(3)
        {
            @include transform(rotate(-45deg));
        }
    }
}