.container {
    width: 400px;
    height: 400px;
    background: #3faf82;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#lines {
    width: 82px;
    height: 54px;
    position: relative;
}

.line {
    position: absolute;
    width: 82px;
    height: 8px;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 0 13px 0 rgba(0,0,0,0.4);
}

.line:nth-child(1) {
    animation: lower-and-rotate1-rev 0.75s forwards;
}
#lines.active .line:nth-child(1) {
    animation: lower-and-rotate1 0.75s forwards;
}

/* TODO: Try reserving the animation */
.line:nth-child(2) {
    animation: shrink-rev 0.75s forwards;
}
#lines.active .line:nth-child(2) {
    animation: shrink 0.75s forwards;
}

.line:nth-child(3) {
    animation: lower-and-rotate3-rev 0.75s forwards;
}
#lines.active .line:nth-child(3) {
    animation: lower-and-rotate3 0.75s forwards;
}

/* Disable animation on page load */
.no-animation * {
    animation-duration: 0s !important;
}

@keyframes shrink {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}
@keyframes shrink-rev {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

@keyframes lower-and-rotate1 {
    0% {transform: translateY(-22px) rotateZ(0deg)}
    50% {transform: translateY(0px) rotateZ(0deg)}
    100% {transform: translateY(0px) rotateZ(45deg)}
}
@keyframes lower-and-rotate1-rev {
    0% {transform: translateY(0px) rotateZ(45deg)}
    50% {transform: translateY(0px) rotateZ(0deg)}
    100% {transform: translateY(-22px) rotateZ(0deg)}
}


@keyframes lower-and-rotate3 {
    0% {transform: translateY(22px) rotateZ(0deg)}
    50% {transform: translateY(0px) rotateZ(0deg)}
    100% {transform: translateY(0px) rotateZ(135deg)}
}
@keyframes lower-and-rotate3-rev {
    0% {transform: translateY(0px) rotateZ(135deg)}
    50% {transform: translateY(0px) rotateZ(0deg)}
    100% {transform: translateY(22px) rotateZ(0deg)}
}