.clip1 {
    clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%);
}

.clip1f {
    animation: anim1f 0.5s linear forwards;
}

.clip1b {
    animation: anim1b 0.5s linear forwards;
}

@keyframes anim1b {
    0% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%);}
    10% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 50% 50%);}
    11% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 100% 100%,50% 50%);}
    40% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 100% 0, 50% 50%);}
    41% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 100% 0, 50% 50% );}
    60% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0, 0 0, 50% 50% );}
    61% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 0,  50% 50% );}
    90% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 100%, 50% 50%);}
    91% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 100%,  50% 50%);}
    100% {clip-path: polygon(50% 50%, 50% 100%, 0 100%, 50% 100%, 50% 50%);}
}

@keyframes anim1f {
    0% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 0 0, 0 100%, 50% 100%, 50% 50%);}
    10% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 0 0, 0 100%, 0 100%, 50% 50%);}
    11% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 0 0, 0 100%, 50% 50%);}
    40% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 0 0, 0 0, 50% 50%);}
    41% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 0 0, 50% 50% );}
    60% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 100% 0, 50% 50% );}
    61% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 0, 50% 50% );}
    90% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 100% 100%, 50% 50%);}
    91% {clip-path: polygon(50% 50%, 50% 100%, 100% 100%, 50% 50%);}
    100% {clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 50%);}
}