<div class="polygon-animate"></div>
.polygon-animate {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: crimson;
    transition: .3s;
    clip-path: polygon(
        50% 0%,
        0% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%
    );
    animation: polygon-ani 5s linear infinite;
}
@keyframes polygon-ani {
    10% {
        background-color: darkorange;
        clip-path: polygon(
            50% 0%,
            100% 50%,
            50% 100%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%
        );
    }
    14% {
        clip-path: polygon(
            50% 0%,
            100% 50%,
            50% 100%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%,
            0% 50%
        );
    }
    24% {
        background-color: lemonchiffon;
        clip-path: polygon(
            100% 38%,
            82% 100%,
            82% 100%,
            18% 100%,
            0% 38%,
            0% 38%,
            0% 38%,
            0% 38%,
            50% 0%
        );
    }
    28% {
        clip-path: polygon(
            100% 38%,
            82% 100%,
            82% 100%,
            18% 100%,
            0% 38%,
            0% 38%,
            0% 38%,
            0% 38%,
            50% 0%
        );
    }
    38% {
        background-color: darkturquoise;
        clip-path: polygon(
            50% 0%,
            100% 25%,
            100% 75%,
            100% 75%,
            50% 100%,
            0% 75%,
            0% 75%,
            0% 25%,
            0% 25%
        );
    }
    42% {
        clip-path: polygon(
            50% 0%,
            100% 25%,
            100% 75%,
            100% 75%,
            50% 100%,
            0% 75%,
            0% 75%,
            0% 25%,
            0% 25%
        );
    }
    52% {
        background-color: darkcyan;
        clip-path: polygon(
            50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            25% 100%,
            0% 60%,
            10% 20%,
            50% 0%
        );
    }
    56% {
        clip-path: polygon(
            50% 0%,
            90% 20%,
            100% 60%,
            75% 100%,
            25% 100%,
            25% 100%,
            0% 60%,
            10% 20%,
            50% 0%
        );
    }
    66% {
        background-color: deepskyblue;
        clip-path: polygon(
            30% 0%,
            70% 0%,
            70% 0%,
            100% 30%,
            100% 70%,
            70% 100%,
            30% 100%,
            0% 70%,
            0% 30%
        );
    }
    70% {
        clip-path: polygon(
            30% 0%,
            70% 0%,
            70% 0%,
            100% 30%,
            100% 70%,
            70% 100%,
            30% 100%,
            0% 70%,
            0% 30%
        );
    }
    80% {
        background-color: indigo;
        clip-path: polygon(
            83% 12%,
            100% 43%,
            94% 78%,
            68% 100%,
            32% 100%,
            6% 78%,
            0% 43%,
            17% 12%,
            50% 0%
        );
    }
    84% {
        clip-path: polygon(
            83% 12%,
            100% 43%,
            94% 78%,
            68% 100%,
            32% 100%,
            6% 78%,
            0% 43%,
            17% 12%,
            50% 0%
        );
    }
    94% {
        background-color: crimson;
        clip-path: polygon(
            50% 0%,
            0% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.