.paint-right-top {
    animation-delay: 1s;
    animation-duration: 0.7s;
    animation-name: paint-right-top;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.paint-left-top {
    animation-delay: 1s;
    animation-duration: 0.7s;
    animation-name: paint-left-top;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.paint-center-top {
    animation-delay: 1s;
    animation-duration: 0.7s;
    animation-name: paint-center-top;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.paint-center-center {
    animation-delay: 1s;
    animation-duration: 1s;
    animation-name: paint-center-center;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes paint-right-top {
    0% {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
        clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }
    50% {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 0, 0 0);
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 0, 0 0);
    }
    80% {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 41% 100%, 0 59%, 0 0);
        clip-path: polygon(100% 0, 100% 100%, 41% 100%, 0 59%, 0 0);
    }
    100% {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 100%, 0 0);
    }
}
@keyframes paint-left-top {
    0% {
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    }
    50% {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 0, 100% 0, 0 100%, 0 100%, 0 0);
    }
    80% {
        -webkit-clip-path: polygon(100% 0, 100% 20%, 100% 58%, 58% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 20%, 100% 58%, 58% 100%, 0 100%, 0 0);
    }
    100% {
        -webkit-clip-path: polygon(100% 0, 100% 25%, 100% 100%, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 25%, 100% 100%, 100% 100%, 0 100%, 0 0);
    }
}
@keyframes paint-center-top {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}
@keyframes paint-center-center {
    0% {
        -webkit-clip-path: polygon(50% 0, 50% 100%, 50% 100%, 50% 0);
        clip-path: polygon(50% 0, 50% 100%, 50% 100%, 50% 0);
    }
    100% {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
    }
}