.swipeimage {
  opacity: 0;
}
.paint-right-top {
    animation-duration: 0.7s;
    animation-name: paint-right-top;
    animation-timing-function: linear;
}
.paint-right-center {
    animation-duration: 0.7s;
    animation-name: paint-right-center;
    animation-timing-function: linear;
}
.paint-left-top {
    animation-duration: 0.7s;
    animation-name: paint-left-top;
    animation-timing-function: linear;
}
.paint-left-center {
    animation-duration: 0.7s;
    animation-name: paint-left-center;
    animation-timing-function: linear;
}
@keyframes paint-right-top {
    0% {
        -webkit-clip-path: circle(0% at 100% 0);
        clip-path: circle(0% at 100% 0);
    }
    50% {
        -webkit-clip-path: circle(76.3% at 87% 8%);
        clip-path: circle(76.3% at 87% 8%);
    }
    100% {
        -webkit-clip-path: circle(126.6% at 87% 8%);
        clip-path: circle(126.6% at 87% 8%);
    }
}
@keyframes paint-right-center {
    0% {
        -webkit-clip-path: circle(0% at 100% 49%);
        clip-path: circle(0% at 100% 49%);
    }
    50% {
        -webkit-clip-path: circle(50% at 100% 50%);
        clip-path: circle(50% at 100% 50%);
    }
    100% {
        -webkit-clip-path: circle(100.3% at 85% 51%);
        clip-path: circle(100.3% at 85% 51%);
    }
}
@keyframes paint-left-top {
    0% {
        -webkit-clip-path: circle(0% at 0 0);
        clip-path: circle(0% at 0 0);
    }
    50% {
        -webkit-clip-path: circle(86.8% at 0 0);
        clip-path: circle(86.8% at 0 0);
    }
    100% {
        -webkit-clip-path: circle(135.6% at 5% 4%);
        clip-path: circle(135.6% at 5% 4%);
    }
}
@keyframes paint-left-center {
    0% {
        -webkit-clip-path: circle(0.0% at 0 50%);
        clip-path: circle(0.0% at 0 50%);
    }
    50% {
        -webkit-clip-path: circle(58.2% at 0 49%);
        clip-path: circle(58.2% at 0 49%);
    }
    100% {
        -webkit-clip-path: circle(100.0% at 16% 50%);
        clip-path: circle(100.0% at 16% 50%);
    }
}